MENU

connect

The connect() function connects a React component to a Redux store. It accepts four parameters, all optional:

1. mapStateToProps?: (state, ownProps?) => stateProps: This will be called anytime the store is updated. 'stateProps' must be a plain object. It will merge with the wrapped component's props. 'ownProps', if given, will cause the function to be called as well when the props of the wrapper component changes. It will contain the wrapper component's props.

   	(state) => stateProps	(state, ownProps) => stateProps
   mapStateToProps runs when:	store state changes	store state changes or any field of ownProps is different
   component re-renders when:	any field of stateProps is different	any field of stateProps is different or any field of ownProps is different

   
   
2. mapDispatchToProps?: dispatchProps | (dispatch, ownProps?) => dispatchProps:: This defines the action-dispatching functions that will be passed to the component's props. If this parameter is null or undefined, the component will receive props.dispatch() by default. Supplying this parameter, for instance, allows actions to be dispatched with props.increment() directly rather than props.dispatch(increment()). mapDispatchToProps can be defined as an object in the form {increment, decrement, ...}, or as a function returning {increment: ()=>dispatch(increment()), ...}. The second/functional form is more flexible as it has access to both dispatch() and ownProps. To bind multiple action creators at once, use the function bindActionCreators() from the 'redux' library: function mapDispatchToProps(dispatch) { return bindActionCreators({ increment, decrement, reset }, dispatch); }
   
   
3. mergeProps?: (stateProps, dispatchProps, ownProps) => Object: This defines the final props of the component. If undefined, the component will receive { ...stateProps, ...dispatchProps, ...ownProps } as its props.
   
   
4. options?: Object:
   1. context?: Object: This sets the context provided to .
   2. pure?: boolean: True by default, this indicates whether the component is 'pure' and does not rely on any input or state other than its props and the selected Redux store's state. When options.pure is true, connect() performs several equality checks (the next four functions) that are used to avoid unnecessary calls to mapStateToProps, mapDispatchToProps, mergeProps, and ultimately to render. While the defaults are probably appropriate most of the times, you may wish to customize them.
   3. areStatesEqual?: Function: default value: strictEqual: (next, prev) => prev === next
   4. areOwnPropsEqual?: Function: default value: shallowEqual
   5. areStatePropsEqual?: Function: default value: shallowEqual
   6. areMergedPropsEqual?: Function: default value: shallowEqual
   7. forwardRef?: boolean: If {forwardRef : true} has been passed to connect, adding a ref to the connected wrapper component will actually return the instance of the wrapped component.

Sample usage:

As the store state changes, mapStateToProps() is invoked and the component is re-rendered.

Notice the difference when including 'ownProps'. Below bindActionCreators() is used to combine action creators.

If you ever pass 'context' to <Provider>, you will need to pass it everytime you use connect(). Below we also compare if 'mergedProps' are equal and should thus avoid rerendering.