1. 7
    Redux: Filtering Redux State with React Router Params
    4m 9s

Redux: Filtering Redux State with React Router Params

Dan Abramov
InstructorDan Abramov

Share this video with your friends

Send Tweet

We will learn how adding React Router shifts the balance of responsibilities, and how the components can use both at the same time.

Darrell
Darrell
~ 4 years ago

It was distracting to suddenly hear about webpackDevMiddleware, Express, etc. with no explanation, no introduction, no links, etc. Broke the nice progression of the tutorial.

Omri Mor
Omri Mor
~ 4 years ago

For those who are using React-Router v4 in their projects the syntax for an optional param is placing a '?' after the param name. For example:

<Route path="/:filter?" component={TodoApp}/>

http://stackoverflow.com/questions/35604617/react-router-with-optional-path-parameter

Alex Okros
Alex Okros
~ 3 years ago

To pass your props from Route to App, you need to do this

<Route path='/:filter?' render={props => <App {...props} />} />

So you'd have this Root.js file:

import React from 'react';
import { Provider } from 'react-redux';
import { browserHistory } from 'react-router';
import { BrowserRouter, Route } from 'react-router-dom';
import App from './App';

const Root = ({store}) => (
    <Provider store={store}>
        <BrowserRouter history={browserHistory}>
            <Route path='/:filter?' render={props => <App {...props} />} />
        </BrowserRouter>
    </Provider>
);

export default Root;

Basically replace the component prop with the render prop. And inside the render prop, thru the arrow function, you pass the props of Route down to the App component.

But here's the buzzer.

The data tree has changed.

Inside your App component, you catch the props like this:

const App = (params) => (
    <div>
      <AddTodo />
      <VisibleTodoList filter={params.match.params.filter || 'all'} />
      <Footer />
    </div>);

So you'd have the following App.js file:

import React from 'react';
import AddTodo from './AddTodo';
import VisibleTodoList from './VisibleTodosList';
import Footer from './Footer';

const App = (params) => (
    <div>
      <AddTodo />
      <VisibleTodoList filter={params.match.params.filter || 'all'} />
      <Footer />
    </div>);

export default App;
Oleksandr Marchenko
Oleksandr Marchenko
~ 2 years ago

For the current versions

    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.0.1",
    "redux": "^4.0.1"

I made it work using slightly altered Alex's answer. Changes to the App definition:

const App = ({ match }) => (
  <div>
    <AddTodo />
    <VisibleTodoList
      filter={match.params.filter || 'all'}
    />
    <Footer />
  </div>
);
App.propTypes = {
  match: PropTypes.object,
};
Roland Pangu
Roland Pangu
~ 2 years ago

Lol Express .. This was clearly before create-react-app came to existence!

Duy Nguyen
Duy Nguyen
~ 2 years ago

For those who are using React-Router v4 in their projects the syntax for an optional param is placing a '?' after the param name. For example:

<Route path="/:filter?" component={TodoApp}/>

http://stackoverflow.com/questions/35604617/react-router-with-optional-path-parameter

Huge thanks for that!