diff --git a/docs/api.md b/docs/api.md index ac0248b0b..2e02c7b13 100644 --- a/docs/api.md +++ b/docs/api.md @@ -55,6 +55,8 @@ It does not modify the component class passed to it; instead, it *returns* a new * [`mapStateToProps(state, [ownProps]): stateProps`] \(*Function*): If this argument is specified, the new component will subscribe to Redux store updates. This means that any time the store is updated, `mapStateToProps` will be called. The results of `mapStateToProps` must be a plain object, which will be merged into the component’s props. If you don't want to subscribe to store updates, pass `null` or `undefined` in place of `mapStateToProps`. If your `mapStateToProps` function is declared as taking two parameters, it will be called with the store state as the first parameter and the props passed to the connected component as the second parameter, and will also be re-invoked whenever the connected component receives new props as determined by shallow equality comparisons. (The second parameter is normally referred to as `ownProps` by convention.) + + >Note: if your mapStateToProps do not need to access component properties, you can use a shorthand syntax by passing an object whose values are "selectors" (See [reselect](https://github.com/reactjs/reselect)) >Note: in advanced scenarios where you need more control over the rendering performance, `mapStateToProps()` can also return a function. In this case, *that* function will be used as `mapStateToProps()` for a particular component instance. This allows you to do per-instance memoization. You can refer to [#279](https://github.com/reactjs/react-redux/pull/279) and the tests it adds for more details. Most apps never need this. @@ -274,6 +276,23 @@ function mapDispatchToProps(dispatch) { export default connect(mapStateToProps, mapDispatchToProps)(TodoApp) ``` +##### Inject `todos` with shorthand syntax, and all todoActionCreators and counterActionCreators directly as props + +```js +import * as todoActionCreators from './todoActionCreators' +import * as counterActionCreators from './counterActionCreators' +import { bindActionCreators } from 'redux' + + +const todosSelector = state => state.todos + +function mapDispatchToProps(dispatch) { + return bindActionCreators(Object.assign({}, todoActionCreators, counterActionCreators), dispatch) +} + +export default connect({todos: todosSelector}, mapDispatchToProps)(TodoApp) +``` + ##### Inject `todos` of a specific user depending on props ```js diff --git a/src/connect/mapStateToProps.js b/src/connect/mapStateToProps.js index 039291b0a..51b9b72b3 100644 --- a/src/connect/mapStateToProps.js +++ b/src/connect/mapStateToProps.js @@ -1,4 +1,4 @@ -import { wrapMapToPropsConstant, wrapMapToPropsFunc } from './wrapMapToProps' +import { wrapMapToPropsConstant, wrapMapToPropsFunc, wrapMapStateObject } from './wrapMapToProps' export function whenMapStateToPropsIsFunction(mapStateToProps) { return (typeof mapStateToProps === 'function') @@ -6,6 +6,12 @@ export function whenMapStateToPropsIsFunction(mapStateToProps) { : undefined } +export function whenMapStateToPropsIsObject(mapStateToProps) { + return (typeof mapStateToProps === 'object') + ? wrapMapStateObject(mapStateToProps, 'mapStateToProps') + : undefined +} + export function whenMapStateToPropsIsMissing(mapStateToProps) { return (!mapStateToProps) ? wrapMapToPropsConstant(() => ({})) @@ -14,5 +20,6 @@ export function whenMapStateToPropsIsMissing(mapStateToProps) { export default [ whenMapStateToPropsIsFunction, + whenMapStateToPropsIsObject, whenMapStateToPropsIsMissing ] diff --git a/src/connect/wrapMapToProps.js b/src/connect/wrapMapToProps.js index 6b39c7961..33cda6843 100644 --- a/src/connect/wrapMapToProps.js +++ b/src/connect/wrapMapToProps.js @@ -1,4 +1,5 @@ import verifyPlainObject from '../utils/verifyPlainObject' +import invariant from 'invariant' export function wrapMapToPropsConstant(getConstant) { return function initConstantSelector(dispatch, options) { @@ -66,3 +67,32 @@ export function wrapMapToPropsFunc(mapToProps, methodName) { return proxy } } + + +function mapValues(obj, fn) { + return Object.keys(obj).reduce((result, key) => { + result[key] = fn(obj[key], key) + return result + }, {}) +} + +export function wrapMapStateObject(mapStateToProps, methodName) { + + const needsProps = Object.keys(mapStateToProps) + .reduce((useProps, key) => { + const type = typeof mapStateToProps[key] + invariant( + type === 'function', + 'mapStateToProps object key %s expected to be a function, instead saw %s', + key, + type + ) + return useProps || mapStateToProps[key].length !== 1 + }, false) + + const mapToPropsFn = needsProps + ? (state, props) => mapValues(mapStateToProps, fn => fn(state, props)) + : state => mapValues(mapStateToProps, fn => fn(state)) + + return wrapMapToPropsFunc(mapToPropsFn, methodName) +} diff --git a/test/components/connect.spec.js b/test/components/connect.spec.js index bdd4725e2..9d27a5b94 100644 --- a/test/components/connect.spec.js +++ b/test/components/connect.spec.js @@ -108,6 +108,54 @@ describe('React', () => { TestUtils.findRenderedComponentWithType(container, Container) ).toNotThrow() }) + + it('should pass state to given component, with shorthand syntax', () => { + const store = createStore(() => ({ + foo: 'bar', + baz: 42, + hello: 'world' + })) + + @connect({ + foo: state => state.foo, + baz: state => state.baz + }) + class Container extends Component { + render() { + return + } + } + + const container = TestUtils.renderIntoDocument( + + + + ) + const stub = TestUtils.findRenderedComponentWithType(container, Passthrough) + expect(stub.props.pass).toEqual('through') + expect(stub.props.foo).toEqual('bar') + expect(stub.props.baz).toEqual(42) + expect(stub.props.hello).toEqual(undefined) + expect(() => + TestUtils.findRenderedComponentWithType(container, Container) + ).toNotThrow() + }) + + it('should throw error if connect is called with shorthand syntax and one object value is not a function', () => { + expect(() => + @connect({ + foo: state => state.foo, + baz: 'badValue' + }) + class Container extends Component { + render() { + return
+ } + } + ).toThrow( + /mapStateToProps object key baz expected to be a function, instead saw string/ + ) + }) it('should subscribe class components to the store changes', () => { const store = createStore(stringBuilder)