connect and withRouter issue

javascript reactjs redux react-redux frontend
xxddoo picture xxddoo · Jan 18, 2019 · Viewed 16.1k times · Source

I am using Redux and React for my project. I have some Routes in App.js. I also use the connect function in react-redux in my project. To prevent update blocking issue, I usually wrapped my component in this way

withRouter(connect(mapStateToProps, mapDispatchToProps)(App)),

However, If I changed order of withRouter and connect it doesn't work:

connect(mapStateToProps, mapDispatchToProps)(withRouter(App))

I have console.log the props in App.js. It already receives location and history props. I am figuring out the theory behind why the order does matter ?

Answer

Wesley Amaro picture Wesley Amaro · Jun 7, 2019

You can use it with the method compose from redux library.

export default compose(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps)
)(App);

Related questions

How do I access store state in React Redux?

I am just making a simple app to learn async with redux. I have gotten everything working, now I just want to display the actual state onto the web-page. Now, how do I actually access the store's state in the …

Read More
Understanding React-Redux and mapStateToProps()

I'm trying to understand the connect method of react-redux, and the functions it takes as parameters. In particular mapStateToProps(). The way I understand it, the return value of mapStateToProps will be an object derived from state (as it lives in …

Read More
'dispatch' is not a function when argument to mapToDispatchToProps() in Redux

I am a javascript/redux/react beginner building an small application with redux, react-redux, & react. For some reason when using mapDispatchToProps function in tandem with connect (react-redux binding) I receive a TypeError indicating that dispatch is not a function …

Read More