Redux: Filtering Redux State with React Router Params

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.

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

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;

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,
};

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

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!