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.

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.

App.js:

import React from 'react';
import Footer from './Footer';
import AddTodo from './AddTodo';
import VisibleTodoList from './VisibleTodoList'; const App = () => (
<div>
<AddTodo />
<VisibleTodoList/>
<Footer />
</div>
); export default App;

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.0 for 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.

//VisibleTodoList.js

import {withRouter} from 'react-router';

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.

const mapStateToProps = (state, ownProps) => {
return {
todos: getVisibleTodos(state.todos, ownProps.params.filter || 'all'), // if filter is '' then change to 'all'
};
}; .. const VisibleTodoList = withRouter(connect(
mapStateToProps,
mapDispatchToProps
)(TodoList));

----------------

So instead let router params passed down from the App,  we just let visibleTodoList to get router params by using withRouter. withRouter will inject the params inside router to the props.

import {connect} from 'react-redux';
import {toggleTodo} from '../actions';
import TodoList from './TodoList';
import {withRouter} from 'react-router'; 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, {params}) => {
return {
todos: getVisibleTodos(state.todos, params.filter || 'all'), // if filter is '' then change to 'all'
};
}; const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch(toggleTodo(id));
},
};
}; const VisibleTodoList = withRouter(connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)); export default VisibleTodoList;

[Redux] Using withRouter() to Inject the Params into Connected Components的更多相关文章

  1. [Redux] Important things in Redux

    Root Smart component can be overloaded, divide 'smart' component wisely & using Provider. Proble ...

  2. react脚手架改造(react/react-router/redux/eslint/karam/immutable/es6/webpack/Redux DevTools)

    公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webp ...

  3. 【译】Redux 还是 Mobx,让我来解决你的困惑!

    原文地址:Redux or MobX: An attempt to dissolve the Confusion 原文作者:rwieruch 我在去年大量的使用了 Redux,但我最近都在使用 Mob ...

  4. React + Redux 入坑指南

    Redux 原理 1. 单一数据源 all states ==>Store 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...

  5. redux基础(1)

    redux ps:每个案例都是接着上一个案例写的 主要以案例讲解如何使用,具体概念请参考如下: 基本概念参考1 基本概念参考2 案例源码戳这里 一.Store.Action.Reducer简介 Sto ...

  6. [Preact] Integrate react-router with Preact

    React-router is the community favourite routing solution - it can handle all of your complex routing ...

  7. 记一次改造react脚手架的过程

    公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webp ...

  8. knockoutjs扩展与使用

    原来考虑使用avalon2.0 经过一周的试验,能力不够,用不起来.最终使用了knockout-3.4.js <!DOCTYPE html> <html> <head&g ...

  9. Unity3D核心类型一览

    Unity3D核心类型一览 本文记录了Unity3D的最基本的核心类型.包括Object.GameObject.Component.Transform.Behaviour.Renderer.Colli ...

随机推荐

  1. 鼠标滑动加载div

  2. T型架构观点学习

    一.成为T型人才 眼界格局思维要尽可能的开阔,并不断横向开阔,专业能力要尽可能专注,并且纵向上不断加深: 互联网的快速迭代开发和扁平化管理,使单纯管理人才的作用越来越小,除了分配任务和项目管理,在其他 ...

  3. 关于Android配色 自适应颜色的实现

    在Android4.4系统中,更加详细地介绍了关于颜色的细节并提供了使用colour的新教程,以使我们的应用更加独一无二.也就是说,作为一个设计师或者开发者,为你的APP做完美的配色已经变成了你的职责 ...

  4. 面试题(二)&mdash;Java基础(下)

    一.进程和线程 进程 (1)正在运行的程序,是系统进行资源分配和调用的独立单位. (2)每一个进程都有它自己的内存空间和系统资源. 线程 (1)是进程中的一条执行路径. (2)一个进程如果只有一条执行 ...

  5. 快速学习springMVC框架原理

    一.通过导图的方法快速去理解springmvc的原理 二.架构流程. 1. 用户发送请求至前端控制器DispatcherServlet 2. DispatcherServlet收到请求调用Handle ...

  6. 微信小程序实现顶部、底部联动滑动

    这个场景一般用于展示数据时,数据过多,每条一行显示不下,表头可以横向滑动,下面要显示的数据部分横向纵向都可以滑动.表头或下面数据部分横向滑动的时候,两部分可以进行联动 具体效果像这样(随便写的丑样式布 ...

  7. android开发要避免的那些坑

    SparseArray 目前有很多地方从性能优化方说使用SparseArray来替换hashMap,来节省内存,提高性能. Linkify.addLinks() 这个类可以更方便的为文本添加超链接. ...

  8. BZOJ5063旅游——非旋转treap

    题目描述 小奇成功打开了大科学家的电脑. 大科学家打算前往n处景点旅游,他用一个序列来维护它们之间的顺序.初 始时,序列为1,2,...,n. 接着,大科学家进行m次操作来打乱顺序.每次操作有6步: ...

  9. 设计模式之Jdk动态代理

    什么是动态代理呢?就是在java的运行过程中,动态的生成的代理类.(为了更熟悉的了解动态代理,你必须先熟悉代理模式,可点击设计模式之代理模式 阅读)我们知道java属于解释型语言,是在运行过程中,寻找 ...

  10. Confluence 6 可以自定义的元素

    色彩配色方案允许你对 UI 中的元素色彩进行编辑,包括顶部条,标签页和背景色. 有一些下面的 UI 元素被用在特定的主题中,配色方案的修改可能不会对这些元素有效. 顶部条(Top Bar)—— 顶部导 ...