Makes the Redux store available to the connect()
calls in the component hierarchy below. Normally, you can’t use connect()
without wrapping the root component in <Provider>
.
If you really need to, you can manually pass store
as a prop to every connect()
ed component, but we only recommend to do this for stubbing store
in unit tests, or in non-fully-React codebases. Normally, you should just use <Provider>
.
store
(Redux Store): The single Redux store in your application.children
(ReactElement) The root of your component hierarchy.
ReactDOM.render(
<Provider store={store}>
<MyRootComponent />
</Provider>,
rootEl
)
Router.run(routes, Router.HistoryLocation, (Handler, routerState) => { // note "routerState" here
ReactDOM.render(
<Provider store={store}>
{/* note "routerState" here: important to pass it down */}
<Handler routerState={routerState} />
</Provider>,
document.getElementById('root')
)
})
ReactDOM.render(
<Provider store={store}>
<Router history={history}>...</Router>
</Provider>,
targetEl
)
Connects a React component to a Redux store.
It does not modify the component class passed to it.
Instead, it returns a new, connected component class, for you to use.
-
[
mapStateToProps(state, [ownProps]): stateProps
] (Function): If specified, the component will subscribe to Redux store updates. Any time it updates,mapStateToProps
will be called. Its result must be a plain object, and it will be merged into the component’s props. If you omit it, the component will not be subscribed to the Redux store. IfownProps
is specified as a second argument, its value will be the properties passed to your component, andmapStateToProps
will be re-invoked whenever the component receives new props. -
[
mapDispatchToProps(dispatch, [ownProps]): dispatchProps
] (Object or Function): If an object is passed, each function inside it will be assumed to be a Redux action creator. An object with the same function names, but bound to a Redux store, will be merged into the component’s props. If a function is passed, it will be givendispatch
. It’s up to you to return an object that somehow usesdispatch
to bind action creators in your own way. (Tip: you may use thebindActionCreators()
helper from Redux.) If you omit it, the default implementation just injectsdispatch
into your component’s props. IfownProps
is specified as a second argument, its value will be the properties passed to your component, andmapDispatchToProps
will be re-invoked whenever the component receives new props. -
[
mergeProps(stateProps, dispatchProps, ownProps): props
] (Function): If specified, it is passed the result ofmapStateToProps()
,mapDispatchToProps()
, and the parentprops
. 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.- [
pure = true
] (Boolean): If true, implementsshouldComponentUpdate
and shallowly compares the result ofmergeProps
, preventing unnecessary updates, assuming that the 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. Defaults totrue
. - [
withRef = false
] (Boolean): If true, stores a ref to the wrapped component instance and makes it available viagetWrappedInstance()
method. Defaults tofalse
.
- [
A React component class that injects state and action creators into your component according to the specified options.
WrappedComponent
(Component): The original component class passed toconnect()
.
All the original static methods of the component are hoisted.
Returns the wrapped component instance. Only available if you pass { withRef: true }
as part of the connect()
’s fourth options
argument.
-
It needs to be invoked two times. The first time with its arguments described above, and a second time, with the component:
connect(mapStateToProps, mapDispatchToProps, mergeProps)(MyComponent)
. -
It does not modify the passed React component. It returns a new, connected component, that you should use instead.
-
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.
export default connect()(TodoApp)
Don’t do this! It kills any performance optimizations because
TodoApp
will rerender after every action.
It’s better to have more granularconnect()
on several components in your view hierarchy that each only
listen to a relevant slice of the state.
export default connect(state => state)(TodoApp)
function mapStateToProps(state) {
return { todos: state.todos }
}
export default connect(mapStateToProps)(TodoApp)
import * as actionCreators from './actionCreators'
function mapStateToProps(state) {
return { todos: state.todos }
}
export default connect(mapStateToProps, actionCreators)(TodoApp)
import * as actionCreators from './actionCreators'
import { bindActionCreators } from 'redux'
function mapStateToProps(state) {
return { todos: state.todos }
}
function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators(actionCreators, dispatch) }
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
import { addTodo } from './actionCreators'
import { bindActionCreators } from 'redux'
function mapStateToProps(state) {
return { todos: state.todos }
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ addTodo }, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
import * as todoActionCreators from './todoActionCreators'
import * as counterActionCreators from './counterActionCreators'
import { bindActionCreators } from 'redux'
function mapStateToProps(state) {
return { todos: state.todos }
}
function mapDispatchToProps(dispatch) {
return {
todoActions: bindActionCreators(todoActionCreators, dispatch),
counterActions: bindActionCreators(counterActionCreators, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
import * as todoActionCreators from './todoActionCreators'
import * as counterActionCreators from './counterActionCreators'
import { bindActionCreators } from 'redux'
function mapStateToProps(state) {
return { todos: state.todos }
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(Object.assign({}, todoActionCreators, counterActionCreators), dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
import * as todoActionCreators from './todoActionCreators'
import * as counterActionCreators from './counterActionCreators'
import { bindActionCreators } from 'redux'
function mapStateToProps(state) {
return { todos: state.todos }
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(Object.assign({}, todoActionCreators, counterActionCreators), dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)
import * as actionCreators from './actionCreators'
function mapStateToProps(state, ownProps) {
return { todos: state.todos[ownProps.userId] }
}
export default connect(mapStateToProps)(TodoApp)
import * as actionCreators from './actionCreators'
function mapStateToProps(state) {
return { todos: state.todos }
}
function mergeProps(stateProps, dispatchProps, ownProps) {
return Object.assign({}, ownProps, {
todos: stateProps.todos[ownProps.userId],
addTodo: (text) => dispatchProps.addTodo(ownProps.userId, text)
})
}
export default connect(mapStateToProps, actionCreators, mergeProps)(TodoApp)