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的更多相关文章

  1. Redux之combineReducers(reducers)详解

    大家好,最近有点忙,忙什么呢?忙着学习一个新的框架Redux,那么这个框架主要是用来做什么的,这篇博客暂时不做介绍,这篇博客针对有一定Redux开发基础的人员,所以今天我讲的重点是Redux里面很重要 ...

  2. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  3. Redux初见

    说到redux可能我们都先知道了react,但我发现,关于react相关的学习资料很多,也有各种各样的种类,但是关于redux简单易懂的资料却比较少. 这里记录一下自己的学习理解,希望可以简洁易懂,入 ...

  4. 实例讲解react+react-router+redux

    前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...

  5. Redux状态管理方法与实例

    状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点.React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http: ...

  6. Redux教程3:添加倒计时

    前面的教程里面,我们搭建了一个简单红绿灯示例,通过在console输出当面的倒计时时间:由于界面上不能显示倒计时,用户体验并不良好,本节我们就添加一个简单的倒计时改善一下. 作为本系列的最后一篇文章, ...

  7. Redux教程1:环境搭建,初写Redux

    如果将React比喻成士兵的话,你的程序还需要一位将军,去管理士兵(的状态),而Redux恰好是一位好将军,简单高效: 相比起React的学习曲线,Redux的稍微平坦一些:本系列教程,将以" ...

  8. 用redux构建购物车

    很久没更新博客了,最近要用到react,再来跟大家分享一个redux案例吧. [ {"id": 1, "title": "iPad 4 Mini&qu ...

  9. [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 ...

随机推荐

  1. 安装pip之后,执行pip,提示:unknown or unsupported command install

    安装pip之后,在dos命令框中输入pip,提示:unknown or unsupported command install,搜索之后,立马在:http://stackoverflow.com/qu ...

  2. simhash--文本排重

    转载自 https://github.com/julycoding/The-Art-Of-Programming-By-July/blob/master/ebook/zh/06.12.md http: ...

  3. spoj VFMUL FFT快速傅立叶变换模板题

    题意:求两个数相乘. 第一次写非递归的fft,因为一个数组开小了调了两天TAT. #include<iostream> #include<cstring> #include&l ...

  4. 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 ...

  5. BZOJ 1725: [Usaco2006 Nov]Corn Fields牧场的安排

    Description Farmer John新买了一块长方形的牧场,这块牧场被划分成M列N行(1<=M<=12; 1<=N<=12),每一格都是一块正方形的土地.FJ打算在牧 ...

  6. 二维卷积c代码

    二维卷积c代码 二维信号的卷积原理请参考另外一篇文章:http://blog.csdn.net/carson2005/article/details/43702241 这里直接给出参考代码: void ...

  7. 【网络流24题】 No.2 太空飞行计划问题 (最大闭合权图 最大流 )

    原题:         W教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利润.现已确定了一个可供选择的实验集合 E={E1,E2,...,Em},和进行这些实验需 ...

  8. Android 4.0设计规范 优先导读 十大改变

    在拜读和翻译了 Android design 设计指导后,对比 Android 4.0 与 Android2.3 及之前版本的 app 设计指导,总结了 Android 4.0 设计的 10 大改变: ...

  9. 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 ...

  10. statspack系列8

    原文:http://jonathanlewis.wordpress.com/2006/12/27/analysing-statspack-8/ 作者:Jonathan Lewis 在前面的关于stat ...