[Redux] Using withRouter() to Inject the Params into Connected Components
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的更多相关文章
- [Redux] Important things in Redux
Root Smart component can be overloaded, divide 'smart' component wisely & using Provider. Proble ...
- react脚手架改造(react/react-router/redux/eslint/karam/immutable/es6/webpack/Redux DevTools)
公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webp ...
- 【译】Redux 还是 Mobx,让我来解决你的困惑!
原文地址:Redux or MobX: An attempt to dissolve the Confusion 原文作者:rwieruch 我在去年大量的使用了 Redux,但我最近都在使用 Mob ...
- React + Redux 入坑指南
Redux 原理 1. 单一数据源 all states ==>Store 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...
- redux基础(1)
redux ps:每个案例都是接着上一个案例写的 主要以案例讲解如何使用,具体概念请参考如下: 基本概念参考1 基本概念参考2 案例源码戳这里 一.Store.Action.Reducer简介 Sto ...
- Redux:with React(一)
作者数次强调,redux和React没有关系(明明当初就是为了管理react的state才弄出来的吧),它可以和其他插件如 Angular, Ember, jQuery一起使用.好啦好啦知道啦.Red ...
- 051_末晨曦Vue技术_处理边界情况之provide和inject依赖注入
provide和inject依赖注入 点击打开视频讲解更详细 在此之前,在我们描述访问父级组件实例的时候,展示过一个类似这样的例子: <google-map> <google-map ...
- [Preact] Integrate react-router with Preact
React-router is the community favourite routing solution - it can handle all of your complex routing ...
- 记一次改造react脚手架的过程
公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webp ...
随机推荐
- 理解和熟练运用js中的call及apply
call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向. 因为 JavaScript 的函数存在「定义时上下文」和 ...
- [CC150] Find a line passing the most number of points
Problem: Given a two-dimensional graph with points on it, find a line which passes the most number o ...
- Stanford CoreNLP--常量定义
在运行Stanford CoreNLP过程中会用到tokenize,pos等参数,这些以常量形式定义在edu.stanford.nlp.pipeline.Annotator中,具体如下: /** * ...
- [topcoder]BestRoads
http://community.topcoder.com/stat?c=problem_statement&pm=10172&rd=13515 http://community.to ...
- vs2015 Xamarin.Android安装
原文:vs2015 Xamarin.Android安装 Xamarin.Android 安装步骤,以vs2015为例 1,安装vs2015中的跨平台项,但是安装在国内肯定失败,因为需要到谷歌下载 当我 ...
- Listview 异步加载图片之优化篇(有图有码有解释)
在APP应用中,listview的异步加载图片方式能够带来很好的用户体验,同时也是考量程序性能的一个重要指标.关于listview的异步加载,网上其实很多示例了,中心思想都差不多,不过很多版本或是有b ...
- just so you're clear
The Google Resume的第一句话是: Just so you're clear: it was not my idea to give a talk to Microsoft Resear ...
- Hadoop RPC源码阅读-交互协议
Hadoop版本Hadoop2.6 RPC主要分为3个部分:(1)交互协议(2)客户端 (3)服务端 (1)交互协议 协议:把某些接口和接口中的方法称为协议,客户端和服务端只要实现这些接口中的方法就可 ...
- 【session】
users.json { "tobi": { "password": "ferret", "name": "T ...
- 详谈easyui datagrid增删改查操作
转自:http://blog.csdn.net/abauch_d/article/details/7734395 前几天我把easyui dadtagrid的增删改查的实现代码贴了出来,发现访问量达到 ...