[Redux] Colocating Selectors with Reducers
We will learn how to encapsulate the knowledge about the state shape in the reducer files, so that the components don’t have to rely on it.
In current VisibleTodoList.js:
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
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, { params }) => ({
todos: getVisibleTodos(state.todos, params.filter || 'all'),
}); const VisibleTodoList = withRouter(connect(
mapStateToProps,
{ onTodoClick: toggleTodo }
)(TodoList)); export default VisibleTodoList;
Currently, the getVisibleTodos(state.todos), depends on state's structure.
Move getVisibleTodos to reducer file:
const todo = (state, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
id: action.id,
text: action.text,
completed: false,
};
case 'TOGGLE_TODO':
if (state.id !== action.id) {
return state;
}
return {
...state,
completed: !state.completed,
};
default:
return state;
}
}; const todos = (state = [{
id: 0,
text: "ok",
completed: false
}], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
todo(undefined, action),
];
case 'TOGGLE_TODO':
return state.map(t =>
todo(t, action)
);
default:
return state;
}
}; export default todos; export const getVisibleTodos = (state, filter) => {
switch (filter) {
case 'all':
return state;
case 'completed':
return state.filter(t => t.completed);
case 'active':
return state.filter(t => !t.completed);
default:
throw new Error(`Unknown filter: ${filter}.`);
}
};
Then in the RootReducer, we manage the state:
import { combineReducers } from 'redux';
import todos, * as fromTodos from './todos'; const todoApp = combineReducers({
todos
}); export default todoApp; export const getVisibleTodos = (state, filter) =>
fromTodos.getVisibleTodos(state.todos, filter);
Use it in VisibleTodoList.js:
import {connect} from 'react-redux';
import {toggleTodo} from '../actions';
import TodoList from './TodoList';
import {withRouter} from 'react-router';
import { getVisibleTodos } from '../reducers'; const mapStateToProps = (state, {params}) => {
return {
todos: getVisibleTodos(state, params.filter || 'all'), // if filter is '' then change to 'all'
};
}; const VisibleTodoList = withRouter(connect(
mapStateToProps,
{onTodoClick: toggleTodo}
)(TodoList)); export default VisibleTodoList;
[Redux] Colocating Selectors with Reducers的更多相关文章
- Redux之combineReducers(reducers)详解
大家好,最近有点忙,忙什么呢?忙着学习一个新的框架Redux,那么这个框架主要是用来做什么的,这篇博客暂时不做介绍,这篇博客针对有一定Redux开发基础的人员,所以今天我讲的重点是Redux里面很重要 ...
- 通过一个demo了解Redux
TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...
- Redux初见
说到redux可能我们都先知道了react,但我发现,关于react相关的学习资料很多,也有各种各样的种类,但是关于redux简单易懂的资料却比较少. 这里记录一下自己的学习理解,希望可以简洁易懂,入 ...
- 实例讲解react+react-router+redux
前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...
- Redux状态管理方法与实例
状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点.React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http: ...
- Redux教程3:添加倒计时
前面的教程里面,我们搭建了一个简单红绿灯示例,通过在console输出当面的倒计时时间:由于界面上不能显示倒计时,用户体验并不良好,本节我们就添加一个简单的倒计时改善一下. 作为本系列的最后一篇文章, ...
- Redux教程1:环境搭建,初写Redux
如果将React比喻成士兵的话,你的程序还需要一位将军,去管理士兵(的状态),而Redux恰好是一位好将军,简单高效: 相比起React的学习曲线,Redux的稍微平坦一些:本系列教程,将以" ...
- 用redux构建购物车
很久没更新博客了,最近要用到react,再来跟大家分享一个redux案例吧. [ {"id": 1, "title": "iPad 4 Mini&qu ...
- [Redux] Fetching Data on Route Change
We will learn how to fire up an async request when the route changes. A mock server data: /** /api/i ...
随机推荐
- 简谈Comparable和Comparator区别
对于Comparable和Comparator这连个相似的接口,还是做一下比较比较好: Comparable Comparator (1)只包含一个compareTo()方法,此方法可以给两个对象排序 ...
- 堆排序 海量数据求前N大的值
最(大)小堆的性质: (1)是一颗完全二叉树,遵循完全二叉树的所有性质. (2)父节点的键值(大于)小于等于子节点的键值 堆的存储 一般都用数组来表示堆,i结点的父结点下标就为(i – 1) / 2. ...
- 【高德地图API】如何解决坐标转换,坐标偏移?
http://bbs.amap.com/thread-18617-1-1.html#rd?sukey=cbbc36a2500a2e6c2b0b19115118ace519002ff3a52731f13 ...
- 3D触控简介:建立数字刻度应用及快速活动栏
苹果公司通过 iPhone 6s 和 6s Plus 引入了与手机互动的全新方式:按压手势.你也许知道,苹果智能手表和苹果笔记本电脑早已具备这一功能,只是名称略有不同,为力感触控(Force Touc ...
- UIKIT网页基本结构学习
没办法,哈哈,以后一段时间,如果公司没有招到合适的运维研发, 啥啥都要我一个人先顶上了~~~:) 也好,可以让人成长. UIKIT,BOOTSTRAP之类的前端,搞一个是有好处的,我们以前即然是用了U ...
- php字符串连接
<?php$s = "a";$s .= "b";echo $s; ?> 输出 ab 字符串连接: .=
- 【HDU 5370】 Tree Maker(卡特兰数+dp)
Tree Maker Problem Description Tree Lover loves trees crazily. One day he invents an interesting gam ...
- 深入了解View实现原理以及自定义View详解
下面几篇文章对View的原理讲的非常详细. Android LayoutInflater原理分析,带你一步步深入了解View(一) Android视图绘制流程完全解析,带你一步步深入了解View(二) ...
- 子查询解嵌套not in 无法展开改写
SQL> explain plan for select * from OPS$CZTEST1.SAVJ_ATOMJOURBAK where ((list_flag = '1' and prt_ ...
- poj2104
裸的主席树,没什么好说的 type node=record l,r,s:longint; end; ..] of node; sa,rank,a,b,sum,head: ...