[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 ...
随机推荐
- 安装pip之后,执行pip,提示:unknown or unsupported command install
安装pip之后,在dos命令框中输入pip,提示:unknown or unsupported command install,搜索之后,立马在:http://stackoverflow.com/qu ...
- simhash--文本排重
转载自 https://github.com/julycoding/The-Art-Of-Programming-By-July/blob/master/ebook/zh/06.12.md http: ...
- spoj VFMUL FFT快速傅立叶变换模板题
题意:求两个数相乘. 第一次写非递归的fft,因为一个数组开小了调了两天TAT. #include<iostream> #include<cstring> #include&l ...
- BZOJ 1634: [Usaco2007 Jan]Protecting the Flowers 护花
Description Farmer John went to cut some wood and left N (2 <= N <= 100,000) cows eating the g ...
- BZOJ 1725: [Usaco2006 Nov]Corn Fields牧场的安排
Description Farmer John新买了一块长方形的牧场,这块牧场被划分成M列N行(1<=M<=12; 1<=N<=12),每一格都是一块正方形的土地.FJ打算在牧 ...
- 二维卷积c代码
二维卷积c代码 二维信号的卷积原理请参考另外一篇文章:http://blog.csdn.net/carson2005/article/details/43702241 这里直接给出参考代码: void ...
- 【网络流24题】 No.2 太空飞行计划问题 (最大闭合权图 最大流 )
原题: W教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利润.现已确定了一个可供选择的实验集合 E={E1,E2,...,Em},和进行这些实验需 ...
- Android 4.0设计规范 优先导读 十大改变
在拜读和翻译了 Android design 设计指导后,对比 Android 4.0 与 Android2.3 及之前版本的 app 设计指导,总结了 Android 4.0 设计的 10 大改变: ...
- sed 变量替换 把m.txt文件中的$i替换成$j
zabbix:/root/zabbix# cat a1.sh for j in {1..48} do sed "s/\$i/$j/g" m.txt >>tmp.txt ...
- statspack系列8
原文:http://jonathanlewis.wordpress.com/2006/12/27/analysing-statspack-8/ 作者:Jonathan Lewis 在前面的关于stat ...