Make sure to check out Troubleshooting Redux first.
This warning is shown when using react 15.5.*. Basically, now it's just a warning, but in react16 the application might break. the PropTypes should now be imported from 'prop-types' package, and not from the react package.
Update to the latest version of react-redux.
See the link above. In short,
mapDispatchToProps
argument to connect()
or with the bindActionCreators()
method, or that you manually call dispatch()
. Just calling your MyActionCreators.addTodo()
function wonât work because it just returns an action, but does not dispatch it.If youâre using React Router 0.13, you might bump into this problem. The solution is simple: whenever you use <RouteHandler>
or the Handler
provided by Router.run
, pass the router state to it.
Root view:
Router.run(routes, Router.HistoryLocation, (Handler, routerState) => {
// note "routerState" here
ReactDOM.render(
<Provider store={store}>
{/* note "routerState" here */}
<Handler routerState={routerState} />
</Provider>,
document.getElementById('root')
)
})
Nested view:
render() {
// Keep passing it down
return <RouteHandler routerState={this.props.routerState} />
}
Conveniently, this gives your components access to the router state! You can also upgrade to React Router 1.0 which shouldnât have this problem. (Let us know if it does!)
If your views depend on global state or React âcontextâ, you might find that views decorated with connect()
will fail to update.
This is because
connect()
implements shouldComponentUpdate by default, assuming that your component will produce the same results given the same props and state. This is a similar concept to Reactâs PureRenderMixin.
The best solution to this is to make sure that your components are pure and pass any external state to them via props. This will ensure that your views do not re-render unless they actually need to re-render and will greatly speed up your application.
If thatâs not practical for whatever reason (for example, if youâre using a library that depends heavily on React context), you may pass the pure: false
option to connect()
:
function mapStateToProps(state) {
return { todos: state.todos }
}
export default connect(
mapStateToProps,
null,
null,
{
pure: false
}
)(TodoApp)
This will remove the assumption that TodoApp
is pure and cause it to update whenever its parent component renders. Note that this will make your application less performant, so only do this if you have no other option.
If you have context issues,
<Provider>
.If youâre using React for web, this usually means you have a duplicate React. Follow the linked instructions to fix this.
ReactDOM emits this warning if useLayoutEffect
is used "on the server". React Redux tries to get around the issue by detecting whether it is running within a browser context. Jest, by default, defines enough of the browser environment that React Redux thinks it's running in a browser, causing these warnings.
You can prevent the warning by setting the @jest-environment
for a single test file:
// my.test.jsx
/**
* @jest-environment node
*/
Or by setting it globally:
// package.json
{
"name": "my-project",
"jest": {
"testEnvironment": "node"
}
}
See https://github.com/facebook/react/issues/14927#issuecomment-490426131