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. RSA算法原理及实现

    参考资料: 阮哥的日志:http://www.ruanyifeng.com/blog/2013/06/rsa_algorithm_part_one.html http://www.ruanyifeng ...

  2. JVM 找出最耗 cpu的线程 并打印线程栈

    监控JVM中最占cpu的线程 top -Hp pid JVM中最占cpu的线程ID -o THREAD,tid,time | awk 'BEGIN {count=0; } { if($2>0.3 ...

  3. 支持HTML5 SqlLite的AndroidApp

    简介: 想要建立一个支持HTML5的Android App; 这个HTML5的程序需要使用本地存储,特别是sqllite; 用eclipse创建了一个app,这个app默认在res/layout建了两 ...

  4. DM8168 debug continue... ...

    1.boot   VFS: Unable to mount root fs via NFS, trying floppy.   VFS: Cannot open root device "n ...

  5. bzoj 2806: [Ctsc2012]Cheat 后缀自动机DP

    2806: [Ctsc2012]Cheat Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 583  Solved: 330[Submit][Statu ...

  6. php 文件上传 以及保存在本地的乱码问题处理

    要知道两点: ①浏览器传到PHP程序中是UTF-8编码 ②PHP程序保存上传的文件,要转换成GBK编码才保存在本地中,否则如果直接使用浏览器传过来的文件名保存在本地,会出现文件名乱码. <?ph ...

  7. Android Bitmap是不能比较的,这样做是错误的

    代码1: Bitmap dir = BitmapFactory.decodeResource(context.getResources(), R.drawable.netdisc_search_lis ...

  8. Android Studio 使用笔记:Git 的配置和第一次提交到仓库

    Git客户端网址:http://git-scm.com/download/ 根据自己的使用平台下载对应的客户端.这里以Mac系统为例,当客户端软件安装配置完毕后,打开AS的配置面板,找到Git的选项 ...

  9. WebService开发应用

    WebService是运行于服务端(一般放在信息服务器上的)让客户端来调用的. 以下开发两个简单的实例 1.自己开发服务端自己调用(vs2010) 1).菜单:“新建-项目”,在打开的窗体中选择,如下 ...

  10. 新浪微博授权时出现"关注 *** 的微博"

    基本设置完成后, 保证scope是 "all" 或 至少 包含 "follow_app_official_microblog". 测试时, 保证你的测试账号没有 ...