Accept stores as an object of prop key to store

README.md

@@ -86,14 +86,14 @@ import {
 
 // but you can write this part anyhow you like:
 
-const initialState = { counter: 0 };
+const initialState = 0;
 
-function increment({ counter }) {
-  return { counter: counter + 1 };
+function increment(counter) {
+  return counter + 1;
 }
 
-function decrement({ counter }) {
-  return { counter: counter - 1 };
+function decrement(counter) {
+  return counter - 1;
 }
 
 // what's important is that Store is a pure function too
@@ -156,14 +156,13 @@ import Counter from './Counter';
 
 export default class CounterContainer {
   render() {
-    // stores must be an array.
-    // actions must be a string -> function map.
+    // stores and actions must both be string -> function maps.
     // props passed to children will combine these actions and state.
     return (
-      <Container stores={[counterStore]}
+      <Container stores={{ counter: stores.counterStore }}
                  actions={{ increment, decrement }}>
         {/* Yes this is a function as a child. Bear with me. */}
-        {props => <Counter {...props} />}
+        {({ state, actions }) => <Counter {...state} {...actions} />}
       </Container>
     );
   }
@@ -183,7 +182,7 @@ import counterStore from './stores/counterStore';
 
 @container({
   actions: { increment, decrement },
-  stores: [counterStore]
+  stores: { counter: counterStore }
 })
 export default class Counter {
   static propTypes = {

examples/counter/App.js

@@ -8,9 +8,9 @@ import Counter from './Counter';
 export default class CounterApp extends Component {
   render() {
     return (
-      <Container stores={[stores.counterStore]}
+      <Container stores={{ counter: stores.counterStore }}
                  actions={{ increment, decrement }}>
-        {props => <Counter {...props} />}
+        {({ state, actions }) => <Counter {...state} {...actions} />}
       </Container>
     );
   }

examples/counter/stores/counterStore.js

@@ -3,14 +3,14 @@ import {
   DECREMENT_COUNTER
 } from '../constants/ActionTypes';
 
-const initialState = { counter: 0 };
+const initialState = 0;
 
-function increment({ counter }) {
-  return { counter: counter + 1 };
+function increment(counter) {
+  return counter + 1;
 }
 
-function decrement({ counter }) {
-  return { counter: counter - 1 };
+function decrement(counter) {
+  return counter - 1;
 }
 
 export default function counterStore(state = initialState, action) {

examples/todo/Body.js

@@ -3,7 +3,7 @@ import { container } from 'redux';
 import { todoStore } from './stores/index';
 
 @container({
-  stores: [todoStore]
+  stores: { todos: todoStore }
 })
 export default class Body {
   static propTypes = {

examples/todo/stores/index.js

@@ -1,21 +1,17 @@
 import { ADD_TODO } from '../constants/ActionTypes';
 
-const initialState = {
-  todos: [{
-    text: 'do something',
-    id: 0
-  }]
-};
+const initialState = [{
+  text: 'do something',
+  id: 0
+}];
 
 export function todoStore(state = initialState, action) {
   switch (action.type) {
   case ADD_TODO:
-    return {
-      todos: [{
-        id: state.todos[0].id + 1,
-        text: action.text
-      }].concat(state.todos)
-    };
+    return [{
+      id: state[0].id + 1,
+      text: action.text
+    }].concat(state);
   }
 
   return state;

src/Container.js

@@ -1,6 +1,6 @@
 import { Component, PropTypes } from 'react';
+import values from 'lodash/object/values';
 import mapValues from 'lodash/object/mapValues';
-import identity from 'lodash/utility/identity';
 import invariant from 'invariant';
 import isPlainObject from 'lodash/lang/isPlainObject';
 
@@ -12,11 +12,11 @@ export default class ReduxContainer extends Component {
   static propTypes = {
     children: PropTypes.func.isRequired,
     actions: PropTypes.object.isRequired,
-    stores: PropTypes.arrayOf(PropTypes.func.isRequired).isRequired
+    stores: PropTypes.object.isRequired
   }
 
   static defaultProps = {
-    stores: [],
+    stores: {},
     actions: {}
   };
 
@@ -42,23 +42,26 @@ export default class ReduxContainer extends Component {
       '"actions" must be a plain object with functions as values. Did you misspell an import?'
     );
     invariant(
-      Array.isArray(stores) &&
-      stores.every(s => typeof s === 'function'),
-      '"stores" must be an array of functions. Did you misspell an import?'
+      isPlainObject(stores) &&
+      Object.keys(stores).every(key => typeof stores[key] === 'function'),
+      '"stores" must be a plain object with functions as values. Did you misspell an import?'
     );
 
-    const { wrapActionCreator, observeStores, getStoreKey } = this.context.redux;
+    const { wrapActionCreator, observeStores } = this.context.redux;
     this.actions = mapValues(props.actions, wrapActionCreator);
 
     if (this.unsubscribe) {
       this.unsubscribe();
     }
 
-    this.mapState = (stores.length === 1) ?
-      state => state[getStoreKey(stores[0])] :
-      identity;
+    this.unsubscribe = observeStores(values(stores), this.handleChange);
+  }
 
-    this.unsubscribe = observeStores(stores, this.handleChange);
+  mapState(stateFromStores) {
+    const { getStoreKey } = this.context.redux;
+    return mapValues(this.props.stores, store =>
+      stateFromStores[getStoreKey(store)]
+    );
   }
 
   handleChange(stateFromStores) {
@@ -72,8 +75,8 @@ export default class ReduxContainer extends Component {
 
   render() {
     return this.props.children({
-      ...this.actions,
-      ...this.state
+      state: this.state,
+      actions: this.actions
     });
   }
 }

src/addons/container.js

@@ -2,14 +2,22 @@ import React from 'react';
 import Container from '../Container';
 import getDisplayName from './getDisplayName';
 
-export default function container({ actions, stores }) {
+function defaultTransformProps({ state, actions }) {
+  return { ...state, ...actions };
+}
+
+export default function container(
+  { actions, stores },
+  transformProps = defaultTransformProps
+) {
   return (DecoratedComponent) => class ReduxContainerDecorator {
     static displayName = `ReduxContainer(${getDisplayName(DecoratedComponent)})`;
 
     render() {
       return (
         <Container actions={actions} stores={stores}>
-          {props => <DecoratedComponent {...this.props} {...props} />}
+          {props => <DecoratedComponent {...this.props}
+                                        {...transformProps(props)} />}
         </Container>
       );
     }