Allow for multiple models in a single store

Remove the ability to avoid namespaces and allow for multiple models
to be used in each barracks store

Author: toddself

barracks-react.js

@@ -1,31 +1,30 @@
 const React = require('react')
 const barracks = require('barracks')
-const sid = require('shortid')
 
-function generateStore (component, model) {
+function generateStore (component, models) {
   const BarracksReact = React.createClass({
     componentWillMount: function () {
-      if (!model.namespace) {
-        model.namespace = sid.generate()
+      if (!Array.isArray(models)) {
+        models = [models]
       }
-      this.namespace = model.namespace
       this.store = barracks()
       this.store.use({
         onError: (err) => {
           this.setState({err})
         },
         onStateChange: (state, data, prev, caller) => {
-          this.setState({model: state[this.namespace]})
+          this.setState({data: state})
         }
       })
-      this.store.model(model)
+      const data = {}
+      models.forEach((model) => {
+        this.store.model(model)
+        data[model.namespace] = model.state
+      })
 
       const createSend = this.store.start({subscriptions: false})
-      const _send = createSend('reactDispatcher', true)
-      const send = (action, msg) => {
-        _send(`${this.namespace}:${action}`, msg)
-      }
-      this.setState({model: Object.assign({}, model.state), send})
+      const send = createSend('reactDispatcher', true)
+      this.setState({data, send})
     },
 
     componentWillUnmount: function () {

test/test.js

@@ -23,17 +23,38 @@ const testStore = {
   }
 }
 
+const testStore2 = {
+  namespace: 'boop',
+  state: {
+    header: 'beep'
+  },
+  reducers: {
+    update: function (state, data) {
+      return {header: data}
+    }
+  }
+}
+
 const TestComponent = React.createClass({
   change: function (evt) {
     evt.preventDefault()
-    this.props.send('update', 'foobar')
+    this.props.send('foo:update', 'foobar')
   },
   render: function () {
     const props = {
-      onClick: (evt) => this.props.send('update', 'foobar'),
-      onBlur: (evt) => this.props.send('makeError')
+      onClick: (evt) => this.props.send('foo:update', 'foobar'),
+      onBlur: (evt) => this.props.send('foo:makeError')
     }
-    return React.createElement('h1', props, `${this.props.err || this.props.model.header}`)
+    return React.createElement('h1', props, `${this.props.err || this.props.data.foo.header}`)
+  }
+})
+
+const TestComponent2 = React.createClass({
+  render: function () {
+    const props = {
+      onClick: (evt) => this.props.send('boop:update', 'plorb')
+    }
+    return React.createElement('h1', props, `${this.props.data.boop.header} ${this.props.data.foo.header}`)
   }
 })
 
@@ -61,25 +82,15 @@ tape('basic', (t) => {
   }, 5)
 })
 
-tape('no namespace', (t) => {
-  const store = {
-    state: {
-      header: 'beep'
-    },
-    reducers: {
-      update: function (state, data) {
-        return {header: data}
-      }
-    }
-  }
-  const Test = bearact(TestComponent, store)
+tape('multimodel', (t) => {
+  const Test = bearact(TestComponent2, [testStore, testStore2])
   const el = React.createElement(Test, {}, null)
   const wrapper = mount(el)
   const h1 = wrapper.find('h1')
-  t.equal(h1.text(), store.state.header)
+  t.equal(h1.text(), `${testStore2.state.header} ${testStore.state.header}`)
   h1.simulate('click')
   setTimeout(() => {
-    t.equal(wrapper.find('h1').text(), 'foobar')
+    t.equal(wrapper.find('h1').text(), 'plorb test')
     t.end()
   }, 5)
 })