Redux: Using withRouter() to Inject the Params into Connected Components
We will learn how to use withRouter() to inject params provided by React Router into connected components deep in the tree without passing them down all the way down as props.
[00:00] Currently, we will read the params filter passed by the router or inside the app component. We can attach the params from there, because the router injects params prop into any route handler component specified in the route configuration. In this case, the filter is passed inside params.
[00:20] However, the app component itself does not really use filter. It just passes the filter down to the visible todo list, which uses it to calculate the currently visible todos. Passing the params from the top level of route handlers gets tedious, so I'm removing the filter prop. Instead, I'm going to find a way to read the current router params in the visible todo list itself.
[00:46] I will add a new import code with Router from the React Router package. It's important that we use at least React Router 3.0for it to work well with Redux. With Router, it takes a React component and returns a different React component that injects the router-related props, such as params, into your component.
[01:09] I want the params to be available inside mapStateToProps, so I need to wrap the connect result so that the connected component gets the params as a prop. I can scroll up a little bit to the mapStateToProps definition and I can change it so that, rather than read filter directly from ownProps, it's going to read it from ownProps.params.
[01:34] Finally, I specify the fallback value, just like I used to do in the app component. To make it more compact, I'm reading the params right inside the argument definition thanks to ES6's structure and syntax.
[01:51] Let's recap how we made the router params available inside the connected components' mapStateToProps function. We'll read the params from the ownProps argument, which corresponds to the props passed from the parent component. The params props specifically is passed by the component generated by withRouter call. This is how they end up in props of our connected component.
[02:16] WithRouter passes any props through itself, so we're going to see both params, and any props passed from the app in the ownProps argument. Finally, I import with Router from the React Router package. It only works correctly with connect since React Router 3.0so make sure you're on the recent version.
[02:40] The params injected by withRouter are the same exact params that get injected by default into the route handler components. You can use both ways of getting to the params and even mix them, but with Router it's handy when you need to read the current params somewhere deep in the component tree.