[Redux] Filtering Redux state with React Router Params

We'll learn how adding React Router shifts the balance of responsibilities, and how the components can use both at the S Ame time.

Now when we click the filter, the URL is changes, but the Todos list doesn ' t. So continue with that.

Router only render the app component, and APP component would get a props called ' params ' contains filter object and we pas s 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 and 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 would 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 */
});

[Redux] Filtering Redux state with React Router Params