Redux:Reducers
action只是描述了“发生了什么事情(导致state需要更新)”,但并不直接参与更新state的操作。state的更新由reducer函数执行。
其基本模式是:(state,action)=> newState
设计组件state的结构:
在开始敲代码之前,我们要先设计好组件state的结构。我们得先明确state需要哪些变量,哪些是纯粹的数据,哪些和UI有关。用合适的结构组织起来(data类的state和UI类的state最好相互独立)。
In a more complex app, you're going to want different entities to reference each other. We suggest that you keep your state as normalized as possible, without any nesting. Keep every entity in an object stored with an ID as a key, and use IDs to reference it from other entities, or lists. Think of the app's state as a database.
如何处理action:
往reducer函数传入参数之后,根据action的type属性,函数执行对应的对state的更新。文档指出三件在reducer函数中必须避免的事情:
1.改变传入的参数。
2.执行“引发其他作用“的操作,比如调用其他api、路由跳转
3.调用”无更新无关“的函数,如Date.now()
For now, just remember that the reducer must be pure. Given the same arguments, it should calculate the next state and return it. No surprises. No side effects. No API calls. No mutations. Just a calculation.
使用
初始化state:
在第一次调用reducer的时候,传入的state回事一个undefined,此时我们可以给它进行初始化。
import { VisibilityFilters } from './actions' const initialState = {
visibilityFilter: VisibilityFilters.SHOW_ALL,
todos: []
} function todoApp(state, action) {
if (typeof state === 'undefined') {
return initialState
} // For now, don't handle any actions
// and just return the state given to us.
return state
}
我们可以借助ES6的参数默认值简化代码:
function todoApp(state = initialState, action) {
// For now, don't handle any actions
// and just return the state given to us.
return state
}
最终的reducer可以是这样:
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
visibilityFilter: action.filter
})
case ADD_TODO:
return Object.assign({}, state, {
todos: [
...state.todos,
{
text: action.text,
completed: false
}
]
})
default:
return state
}
}
记住几个地方:
*只要符合switch语句的某个case,返回的state是一个新的对象。
*匹配不到case的,default返回的是原先的state。任何意外的action都不触发state更新,可控才是最重要的。
*Object.assign是ES6的api,许多浏览器可能并不原生支持,开发时记得安装插件 Babel plugin。另,assign第一个参数必须是空对象;也可以用 对象扩展运算符{...state,...update}。
*switch语句不是必须的,reducer内部的结构完全由自己设计
分解(解构)Reducer:
当我们的state涉及很多变量的时候,像上面那样写在同一个函数中难免会显得又长又臭。
作者给出的优化方法是,在Reducer中直接返回一个新的字面量的state。但是这个state各个属性的值是一个reducer(state.key,action)的返回值。
也就是说,返回的state的各个属性,都经过一个reducer的处理,如果该属性的值需要更新。则内部返回一个新属性值。如果该属性不需要更新,则内部返回原来的属性值。
最后store获得的是响应了action的更新了的state。
看下面的例子:
function todos(state = [], action) {
switch (action.type) {
case ADD_TODO:
return [
...state,
{
text: action.text,
completed: false
}
]
case TOGGLE_TODO:
return state.map((todo, index) => {
if (index === action.index) {
return Object.assign({}, todo, {
completed: !todo.completed
})
}
return todo
})
default:
return state
}
} function visibilityFilter(state = SHOW_ALL, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return action.filter
default:
return state
}
} function todoApp(state = {}, action) {
return {
visibilityFilter: visibilityFilter(state.visibilityFilter, action),
todos: todos(state.todos, action)
}
}
这段代码结构很清晰,todos函数负责管理事件的添加和‘是否完成’的标记,visibilityFilter负责列表的显示规则,顶层Reducer返回的state的各个属性的值都是一个reducer的返回值。由于内部reducer的函数名和state的属性名一致,所以可以用对象属性简写的方式:return { visibilityFilter,todos};
要留意:
内部reducer单元中,参数state都有默认值,因为每个reducer分别更新state的不同属性,因此他们得到的state参数其实是state的一部分属性,他们返回的值也是新state的一部分。
顶层Reducer才是返回新state的地方。
另外,Redux提供了一个工具 combineReducers()来帮助我们实现上面这种分解reducer功能的逻辑:
import { combineReducers } from 'redux' const todoApp = combineReducers({
visibilityFilter,
todos
}) export default todoApp 等价于 export default function todoApp(state = {}, action) {
return {
visibilityFilter: visibilityFilter(state.visibilityFilter, action),
todos: todos(state.todos, action)
}
}
就是一个生成Reducer的工具。
Redux:Reducers的更多相关文章
- [React Testing] Redux Reducers
Sometimes we want to test our Redux reducers to make sure they work as expected. In this lesson we w ...
- [Redux + Webpack] Hot reloading Redux Reducers with Webpack
Webpack will hot reload the component, but the reducer we need hard refresh. To sovle the problem, g ...
- [Functional Programming ADT] Combine Multiple State ADT Based Redux Reducers
Redux provides a convenient helper for combining many reducers called combineReducer, but it focuses ...
- Redux学习笔记:Redux简易开发步骤
该文章不介绍Redux基础,也不解释各种乱乱的概念,网上一搜一大堆.只讲使用Redux开发一个功能的步骤,希望可以类我的小白们,拜托它众多概念的毒害,大牛请绕道! 本文实例源代码参考:React-Re ...
- react_结合 redux - 高阶函数 - 高阶组件 - 前端、后台项目打包运行
Redux 独立的集中式状态管理 js 库 - 参见 My Git 不是 react 库,可以与 angular.vue 配合使用,通常和 react 用 yarn add redux import ...
- react脚手架改造(react/react-router/redux/eslint/karam/immutable/es6/webpack/Redux DevTools)
公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webp ...
- redux详解
redux介绍 学习文档:英文文档,中文文档,Github redux是什么 redux是一个独立专门用于做状态管理的JS库(不是react插件库),它可以用在react, angular, vue等 ...
- 3.1 开始使用 redux
前面我们介绍了 flux 架构以及其开源实现 redux,在这一节中,我们将完整的介绍 redux: redux 介绍 redux 是什么 redux 概念 redux 三原则 redux Store ...
- Redux(mvc、flux、react-redux)
其他章节请看: react实战 系列 Redux 关于状态管理,在 Vue 中我们已经使用过 Vuex,在 spug 项目中我们使用了 mobx,接下来我们学习 Redux. 本篇以较为易懂的方式讲解 ...
随机推荐
- 在Windows中使用VirtualBox安装Ubuntu
VeitualBox官网下载:https://www.virtualbox.org/wiki/Downloads 安装教程:http://dblab.xmu.edu.cn/blog/337-2/ 安装 ...
- Java创建对象时的简单内存分析
简单创建对象的内存分析 主程序: 1 public class Application { 2 public static void main(String[] args) { 3 Animal do ...
- [Inno Setup] 卸载 重启之后 删除文件
某些系统文件,例如驱动,不重启无法删除. 利用windows注册表里的 RunOnce.注意必须在HKLM下,否则可能权限不够. 不能直接填cmd命令,要以cmd的参数形式填写. procedure ...
- Openstack object list 一次最多有一万个 object
When you request a list of containers or objects, Object Storage returns a maximum of 10,000 names f ...
- java中ThreadPool的介绍和使用
文章目录 Thread Pool简介 Executors, Executor 和 ExecutorService ThreadPoolExecutor ScheduledThreadPoolExecu ...
- Android 5.0系统默认颜色
伴随着 Android5.0 的发布也更新了support-v7-appcompat 到 V21,其中增加了 ToolBar.recyclerview.cardview 等控件. Android5.0 ...
- js高阶函数的理解
高阶函数:英文叫Higher-order function.JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数 ...
- Netty(六):NioServerSocketChannel源码解析
我们在Netty学习系列五的最后提出了一些问题还没得到回答,今天来通过学习NioServerSocketChannel的源码来帮我们找到之前问题的答案. 先看一下NioServerSocketChan ...
- python实现二分叉查找
*二分叉查找就是折半查找 比如12345这几个数字当中找2,他会先找到这五个数字中的中坚的那个与2进行比较,比如中间的3>2他就认为3以后的不用查找了,然后查找3左边的,即123,再把这个分半, ...
- DeepWalk论文精读:(3)实验
模块三 1 实验设计 1.1 数据集 BLOGCATALOG[39]:博客作者网络.标签为作者感兴趣的主题. FLICKR[39]:照片分享网站的用户网络.标签为用户的兴趣群组,如"黑白照片 ...