[Redux] Filtering Redux State with React Router Params

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

Now when we click the filter, the url changes, but the todos list doesn‘t change. So continue with that.

Router only render the App component, and App component will get a props called ‘params‘ contains filter object and we pass this filter to VisibleTodoList:

// App.js

import React from ‘react‘;
import Footer from ‘./Footer‘;
import AddTodo from ‘./AddTodo‘;
import VisibleTodoList from ‘./VisibleTodoList‘;

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

export default App;

In VisibleTodoList.js, we change the mapStateToProps function, add a param ‘ownProps‘ which get from App.js. It contains the ‘filter‘ proporty.

Then in ‘getVisibleTodos()‘ function, change the switch case to match router.

// VisibleTodoList.js

import { connect } from ‘react-redux‘;
import { toggleTodo } from ‘../actions‘;
import TodoList from ‘./TodoList‘;

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case ‘all‘:
      return todos;
    case ‘completed‘:
      return todos.filter(t => t.completed);
    case ‘active‘:
      return todos.filter(t => !t.completed);
    default:
      throw new Error(`Unknown filter: ${filter}.`);
  }
};

const mapStateToProps = (state, ownProps) => {
  return {
    todos: getVisibleTodos(state.todos, ownProps.filter),
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id));
    },
  };
};

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList);

export default VisibleTodoList;

Last, change the devServer.js, app.get(‘/*‘), any router will return index.html.

import path from ‘path‘;
import webpack from ‘webpack‘;
import webpackDevMiddleware from ‘webpack-dev-middleware‘;
import config from ‘./webpack.config.babel‘;
import Express from ‘express‘;

const app = new Express();
const port = 3000;

const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath,
}));

app.get(‘/*‘, (req, res) => {
  res.sendFile(path.join(__dirname, ‘index.html‘));
});

app.listen(port, error => {
  /* eslint-disable no-console */
  if (error) {
    console.error(error);
  } else {
    console.info(
      ‘?? Listening on port %s. Open up http://localhost:%s/ in your browser.‘,
      port,
      port
    );
  }
  /* eslint-enable no-console */
});