mapStateToProps

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

Connects a React component to a Redux store. 

connect

 is a facade around 

connectAdvanced

,
providing a convenient API for the most common use cases.

It does not modify the component class passed to it; instead, it returns a new, connected component class for you to use.

Arguments

[

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 

ownProps

 is
specified as a second argument, its value will be the props passed to your component, and 

mapStateToProps

 will be additionally
re-invoked whenever the component receives new props (e.g. if props received from a parent component have shallowly changed, and you use the ownProps argument, mapStateToProps is re-evaluated).

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 and the
tests it adds for more details. Most apps never need this.
The 

mapStateToProps

 function takes a single argument of the entire Redux store’s
state and returns an object to be passed as props. It is often called a selector. Use reselect to
efficiently compose selectors and compute derived data.

[

mapDispatchToProps(dispatch, [ownProps]): dispatchProps

] (Object or Function):
If an object is passed, each function inside it is assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a 

dispatch

 call
so they may be invoked directly, will be merged into the component’s props. If a function is passed, it will be given 

dispatch

.
If you don't want to subscribe to store updates, pass 

null

 or 

undefined

 in
place of

mapDispatchToProps

. It’s up to you to return an object that somehow uses 

dispatch

 to
bind action creators in your own way. (Tip: you may use the 

bindActionCreators()

 helper
from Redux.) If you omit it, the default implementation just injects 

dispatch

 into your component’s props. If 

ownProps

 is
specified as a second argument, its value will be the props passed to your component, and 

mapDispatchToProps

 will be re-invoked
whenever the component receives new props.

Note: in advanced scenarios where you need more control over the rendering performance, 

mapDispatchToProps()

can
also return a function. In this case, that function will be used as 

mapDispatchToProps()

 for a particular
component instance. This allows you to do per-instance memoization. You can refer to #279 and the
tests it adds for more details. Most apps never need this.

[

mergeProps(stateProps, dispatchProps, ownProps): props

] (Function):
If specified, it is passed the result of

mapStateToProps()

, 

mapDispatchToProps()

,
and the parent 

props

. The plain object you return from it will be passed as props to the wrapped component. You may specify
this function to select a slice of the state based on props, or to bind action creators to a particular variable from props. If you omit it, 

Object.assign({},
ownProps, stateProps, dispatchProps)

 is used by default.

[

options

] (Object) If specified, further customizes the
behavior of the connector. In addition to the options passable to

connectAdvanced()

 (see those below), 

connect()

 accepts
these additional options:
[

pure

] (Boolean): If true, 

connect()

 will
avoid re-renders and calls to 

mapStateToProps

, 

mapDispatchToProps

,
and

mergeProps

 if the relevant state/props objects remain equal based on their respective equality checks. Assumes that the
wrapped component is a “pure” component and does not rely on any input or state other than its props and the selected Redux store’s state. Default value: 

true

[

areStatesEqual

] (Function): When pure, compares incoming store state to
its previous value. Default value:

strictEqual (===)

[

areOwnPropsEqual

] (Function): When pure, compares incoming props to its
previous value. Default value:

shallowEqual

[

areStatePropsEqual

] (Function): When pure, compares the result of 

mapStateToProps

 to
its previous value. Default value: 

shallowEqual

[

areMergedPropsEqual

] (Function): When pure, compares the result of 

mergeProps

 to
its previous value. Default value: 

shallowEqual