在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
例如 在A组件下面有一个B组件，当我在B组件 dispatch一个action的时候，state发生改变，结果A组件更新，然后B组件更新。这样正常么？能不能只更新B组件，而父组件不更新？
第二A组件 对应reduer 是A.js
C组件对应C.js，A C 同级，但是 当在 B组件dispatch action的时候A C里面的reducer都会触发一次，
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
所有被connect的组件都会更新，所以有重复更新渲染的问题，不过应该没有什么问题的，redux就这样的，dispatch action的时候，所有的reducers都会执行。而父组件不更新，使用setState？使用mobx？
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。学习Redux刷新了我的前端App状态管理观 - 简书
学习Redux刷新了我的前端App状态管理观
写在前面的话
我听过Redux好久了，不过真的开始学大概在一个月前，学会Redux之后我用一周多的时间重构了之前纯React写的一个小项目。学习的过程中心态变化很大，但是最终真的感觉如果再写复杂一点的项目，我应该再也不会直接用state管理所有状态了。Redux真多刷新了我的状态管理观。
本文的写在目的在于让那些一直在使用React，但是还没有使用Redux管理复杂应用状态的同学了解Redux的核心思想并能够更加平滑的学习使用Redux。
为什么要使用Redux
快双十一了，突然想到一个比喻来解释为什么会有React这类框架的存在，为什么我们要使用Redux，以前使用jQuery不也挺快乐的嘛。
想想现代物流系统的发展的不同阶段，我们寄一件东西的过程，
没有物流系统时：
打包准备好要送出去的东西；
出门乘车到达朋友家，把东西送给朋友；
很直接很方便，很费时间，送东西的距离有限（同城？）；
出现了各大物流公司时：
打包准备好要送出去的东西；
出门到距离家最近的物流公司，填写物品，收件人等基本信息；
物流公司替你送物品到你的朋友处，自己可以回家做别的事情了；
多了一个中介，要付一定的运送成本，但是东西可以送到远在几千公里之外的其它人了，用一点点钱节约了自己宝贵的时间，完成了以前我们不可能做的事情；
没错，没有物流系统时对应的就是以前使用jQuery的前端阶段，做一件事情很直接，如果只是送快递给一个特别近的人，那当然是非常方便。就算你要从北京送一个东西到上海，在这个阶段你也可以实现，但是需要付出的代价就太大了。
而出现了各大物流公司对应的就是使用React等框架的阶段，学习React需要付出成本，如果你只需要做简单的事情（比如说你想把东西送给你的邻居），那使用此类框架其实显得特别累赘，把简单的事情复杂化了，但是如果你想做复杂一点的事情（同时寄礼物给三个不同城市的人），那么选择快递公司是不会错的。
那么React和Redux的关系又该如何理解呢？
我觉得我们可以把React比如为一家自建快递系统的公司（京东？），在一定范围内，它的快递系统已经足够好了（部分一二线城市一天内直达），但是要管理这个日益复杂的快递系统，需要公司付出巨大的成本。
Redux可以看做业内最好的第三方快递系统（顺丰？），使用它比较贵（学习成本稍微有点高），但是他到达全国主要城市都会特别快，如果你是一个电商老板，采用这个第三方物流系统之后，你只需要关注于自己的货物，几乎不用再去关心物流怎么办了。
不同于顺丰每一次寄货都要那么高的价格，redux是一个学习一次，就可以免费寄货的优秀第三方快递系统，那我们当然要解散自己的物流公司来采用这个第三方的选择的。不过话说回来，学习是需要有成本的，所以是直接使用React还是学习Redux再使用，这是你一个你需要依据你自己项目的实际情况作出选择的事情。
不过这个例子可能并不足够合适，Redux做的不仅仅是管理原来React里state里面的状态。Redux其实可以接管我们的app里所有的数据。接下来我们具体看看Redux究竟做了什么。
Redux可以做什么
我们常常听到一种说法，“Redux是一个非常好的状态管理器”，那究竟什么是状态呢。
重新理解前端中的状态
想想我们平时看的网页，app，或者任何其它和我们有交互的东西，我们感觉到交互的发生是因为界面依据我们的行为作出了反馈，界面所有的改变，其实都可以看作是状态的改变，或者说界面会改变是因为我们的某个行为（事件）（click,drag,move...）触发了某个函数，函数造成了状态的改变，进而改变了界面。
如此看来，无论是显示隐藏这种可见的状态，还是从服务器获取更多的数据，这些都可以看做是状态，而这些状态就是我们的Redux要管理的。
换一句可能比较专业一点的说法吧，状态包括
API S（数据）
UI S(UI的表现形式)
前端状态管理史
为了更好的展示Redux的好，我们回顾一下前端的状态管理史（称为史其实并不合适，以下三种模式现在都有大量人在使用）。
jQuery 时期
我们使用诸如$(element).addClass('active')这样的语句来改变状态；
对简单的应用来说，这样写简单明了，但是状态一多一复杂就乱了，并不存在一个专门管理状态的地方；
React内部管理状态时期
我们引入了state来管理组件状态，界面想显示不同的样子，我们通过各种函数来改变state来实现
已经存在一个专门管理状态的state（对象，数组）了，对大部分应用来说，用state来管理状态已经足够了,但是应用复杂了会使得状态
引入Redux等状态管理机制时期；
redux使用一个store来全局管理各种状态，提供一些不算复杂的api来专门管理状态；
可以管理更加复杂的状态，通过redux的管理，状态的改变变得更加清晰，可预测,redux中的状态是一个只读属性，通过一定的方法，可以回到已经经历过的某个状态（时间旅行）;
（这里没有说到MVC等机制有兴趣的同学可以看做进一步对比了解，基本观点是MVC固然很好，但是配合React使用时，性价比不是那么高了。）
Redux是怎么管理状态的
上面已经说了Redux管理状态怎么好 怎么好，那Redux究竟是如何管理状态的呢？状态分为UI State 和 API State，Redux针对这两部分也提供了两种方法
为改变已有的状态提供了方案；
为异步获取新的数据提供了方案；
Redux的数据流
还是用图片来说明更加清楚
下图说明了Redux和React的状态流分别是怎么样的；
React和Redux分别是怎么管理状态的
下图说明了使用Redux管理状态为什么是可预测的
可预测的Redux状态
Redux的数据是如何流动的其实也是理解Redux的好处的关键部分之一，简单来说每个事件会发送一个action，action通过dispatch触发reduce，直接依据旧的state生成一个新state替代最顶层的store里面原有的state。
有一篇文章以漫画的形式把这个讲的特别透
说了这么多使用redux管理状态的好处，但是你看到这里可能依旧不知道如何使用redux,不要着急，我和你分享我的Redux学习经验。
开始学习Redux
学习Redux前需要了解的基础知识
如果你已经能很熟练的使用React，我觉得学习Redux需要了解的基础知识，你应该都已经了解了。具体说来主要有以下内容；
React（Redux是flux架构的实现，虽然其也可以配合其它框架使用，但是它和React可能还是更配一些吧）；
基础的ES6知识（Redux重视函数式编程，会使得编程的结构看起来更加简洁）；
用了ES6（甚至ES7）当然免不了要学习使用Webpack，Babel等；
还有一点，我觉得学习编程应该不怕折腾，使用Redux管理一个状态可能需要改好几个文件里的代码才能实现，编程不再显得那么直接（比如 通过connect.js调用action.js里的某个action,并依据这个action触发reducer.js里面的某个reducer函数依据现有的state,创建一个新的state）,redux把一些操作给抽象化了，如果思维没有跟着改变，会让人有一种redux文档里面的东西我都看懂了，但是我怎么就是编不出来呢？那种痛苦的感觉。
学习使用Redux
网上关于Redux的教程特别多了（写的特别好），学习新概念是比较恼人的一个过程，所以我还是会对Redux提供的api做一个简洁的描述，然后我会把我这段时间看过的我觉得比较好的文章的链接放在下面以供大家参考。
Redux中的一些概念
state:app中的状态存放的地方，并且state是只读的，不同于React，Redux中state的更改，其实是创建了一个全新的state；
action:是一个对象，作用和他的名字一样，用来表明，你想要做的那件事情，该对象的属性type，用来标记，你要做的事情；
reducer:是一个函数，接收当前state，和一个action作为参数，依据action基于当前的state生成新的state;
dispatch:推送某个action给reducer;
action creater:一个创建action的函数，返回一个action对象；
异步action：返回一个函数，和中间件配合可以很容易的实现异步操作；
store:可以理解为state的家，全局只有一个，有以下方法
getState():获取当前的state树；
dispatch(action):触发一个action,创建
subscribe(listener):
replaceReducer(nextReducer)
combineRedecers(reducers)：当我们的应用比较复杂的时候，我们可能会分开写好几个reducer，这个函数的作用就是把这些单独的reduce合并为一个大的reduce，需要注意的是我们的state的结构和我们的各个reducer是一一对应的。
applyMiddleware(...middlewares):告诉redux我们会用到那些中间件，比如说要用到基础的异步，我们会用到thunk中间件；
let store = createStore(
comReducer,
applyMiddleware(thunk)
bindActionCreators(actionCreators, dispatch):绑定actionCreator和dispatch以供直接使用；
配合 React 使用Redux需要掌握的一些概念
redux只是管理状态的一种方法，真的用在React里，使用作者提供的一个工具react-redux会更加方便，其api很简单，主要有以下几个；
&Provider store&,嵌套在React组件的最外层，因此可以把state传给所有的组件（利用了React的context）；
把React组件分为容器组件和UI组件两类，容器组件管理逻辑，UI组件管理显示效果二者通过connect方法连接，容器组件一般由UI组件依据connect生成；
mapStateToProps()，存在于容器组件中，针对UI组件的各状态(依据state，或者父组件的props)生成；
mapDispatchToProps()，存在于容器组件中，针对UI组件中的各可能改变state的事件定义的一系列的函数，依据props传给UI组件；
Redux参考文献
Redux还有一个非常酷的工具，让我们可以实时看到当前的state,使用redux不可不用啊。
还是得靠实践
在弄懂了一些关键的核心概念以后，如果还是不知道怎么写，就模仿官方给的多个例子针对自己的需求敲写一次吧。模仿了两个例子就肯定明白了。
Redux也有自己的,理解的一些技术辅助Redux更加方便的实现状态管理，其中有一些是下一步我特别想了解的比如说，，，当然因为学习了Redux，所以我也想对函数式编程做进一步理解，之前找到了一本非常好的关于函数式编程的书，分享给大家，大家一起学习。
前端\摄影\阅读\好奇。
一、CMS管理系统功能 CMS是ContentManagementSystem的缩写，意为&内容管理系统&。 CMS都有可能包括些什么？ 隐藏在内容管理系统(CMS)之后的基本思想是分离内容的管理和设计。页面设计存储在模板里，而内容存储在数据库或独立的文件中。 当一个用户请...
http://gaearon.github.io/redux/index.html ，文档在 http://rackt.github.io/redux/index.html 。本文不是官方文档的翻译。你可以在阅读官方文档之前和之后阅读本文，以加深其中的重点概念。 根据该项目...
本文首发于《程序员》杂志 2017年7月版：前端开发创新实践，作者本人，部分内容链接Redux or Mobx --前端应用状态管理方案的探索与思考 1. 前言 前端的发展日新月异，Angular/React/Vue 等前端框架的兴起，为我们的应用开发带来新的体验。Reac...
近期更新本人新推出 react 的 state 管理框架 pastate.js,
让我们可以用赋值=的方式来更新 state 值！欢迎关注和star，感谢~ 前言：在当下的前端界，react 和 redux 发展得如火如荼，react 在 github 的 star 数达...
做React需要会什么？ react的功能其实很单一，主要负责渲染的功能，现有的框架，比如angular是一个大而全的框架，用了angular几乎就不需要用其他工具辅助配合，但是react不一样，他只负责ui渲染，想要做好一个项目，往往需要其他库和工具的配合，比如用redu...
风缓缓地驱赶着流云,像是马夫挥着马鞭驱赶大群的骏马。突然,像是有人在马群中放了一把火,燃烧的骏马被火把追赶,整个天幕也渐渐被夕阳染得鲜红。 夕阳点燃了天空,也点燃了树林。 那些扭曲向上的枝桠像是太阳虔诚的教徒,它们的手臂接受了神的恩赐,被镀上一层浅金。太阳就是有这这种魔力,...
当从微博这一八卦发动机上获悉了某个消息之后，就可以预料到又要有无数的公众号和抓热点的人要赶紧下手，抢占高地了。 果不其然，艾玛的丢书活动和超级丹的新闻，瞬间刷爆了朋友圈，也引燃了无数写作者。 然而，我真的疲劳了，我只是想看一些纯净的东西，不是你们抓着一个热点不放，非要从中感...
首先，因为mariadb与mysql类似，我们在安装MySQL之前，需要先卸载包含有mariadb关键字的RPM包，执行命令：rpm –qa | grep mariadb来查看一下要卸载哪些软件： 卸载命令如下：rpm -e --nodeps mariadb-libs-5....
所以无论是保研，实习，考研， 都需要努力，无需羡慕他人Redux 入门教程（一）：基本用法 - 阮一峰的网络日志
Redux 入门教程（一）：基本用法
一年半前，我写了，介绍了 React 的基本用法。
React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。
组件之间的通信
对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React 没法写大型应用。
为了解决这个问题，2014年 Facebook 提出了
架构的概念，引发了很多的实现。2015年， 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。
本文详细介绍 Redux 架构，由于内容较多，全文分成三个部分。今天是第一部分，介绍基本概念和用法。
零、你可能不需要 Redux
首先明确一点，Redux 是一个有用的架构，但不是非用不可。事实上，大多数情况，你可以不用它，只用 React 就够了。
曾经有人说过这样一句话。
"如果你不知道是否需要 Redux，那就是不需要它。"
Redux 的创造者 Dan Abramov 又补充了一句。
"只有遇到 React 实在解决不了的问题，你才需要 Redux 。"
简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。
用户的使用方式非常简单
用户之间没有协作
不需要与服务器大量交互，也没有使用 WebSocket
视图层（View）只从单一来源获取数据
上面这些情况，都不需要使用 Redux。
用户的使用方式复杂
不同身份的用户有不同的使用方式（比如普通用户和管理员）
多个用户之间可以协作
与服务器大量交互，或者使用了WebSocket
View要从多个来源获取数据
上面这些情况才是 Redux 的适用场景：多交互、多数据源。
从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux。
某个组件的状态，需要共享
某个状态需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态
发生上面情况时，如果不使用 Redux 或者其他状态管理工具，不按照一定规律处理状态的读写，代码很快就会变成一团乱麻。你需要一种机制，可以在同一个地方查询状态、改变状态、传播状态的变化。
总之，不要把 Redux 当作万灵丹，如果你的应用没那么复杂，就没必要用它。另一方面，Redux 只是 Web
架构的一种解决方案，也可以选择其他方案。
一、预备知识
阅读本文，你只需要懂 React。如果还懂 Flux，就更好了，会比较容易理解一些概念，但不是必需的。
Redux 有很好的，还有配套的小视频（，）。你可以先阅读本文，再去官方材料详细研究。
我的目标是，提供一个简洁易懂的、全面的入门级参考文档。
二、设计思想
Redux 的设计思想很简单，就两句话。
（1）Web 应用是一个状态机，视图与状态是一一对应的。
（2）所有的状态，保存在一个对象里面。
请务必记住这两句话，下面就是详细解释。
三、基本概念和 API
Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。
Redux 提供createStore这个函数，用来生成 Store。
import { createStore } from 'redux';
const store = createStore(fn);
上面代码中，createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。
Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。
当前时刻的 State，可以通过store.getState()拿到。
import { createStore } from 'redux';
const store = createStore(fn);
const state = store.getState();
Redux 规定， 一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。
3.3 Action
State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。
Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置，社区有一个可以参考。
const action = {
type: 'ADD_TODO',
payload: 'Learn Redux'
上面代码中，Action 的名称是ADD_TODO，它携带的信息是字符串Learn Redux。
可以这样理解，Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。
3.4 Action Creator
View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。
const ADD_TODO = '添加 TODO';
function addTodo(text) {
type: ADD_TODO,
const action = addTodo('Learn Redux');
上面代码中，addTodo函数就是一个 Action Creator。
3.5 store.dispatch()
store.dispatch()是 View 发出 Action 的唯一方法。
import { createStore } from 'redux';
const store = createStore(fn);
store.dispatch({
type: 'ADD_TODO',
payload: 'Learn Redux'
上面代码中，store.dispatch接受一个 Action 对象作为参数，将它发送出去。
结合 Action Creator，这段代码可以改写如下。
store.dispatch(addTodo('Learn Redux'));
3.6 Reducer
Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。
const reducer = function (state, action) {
return new_
整个应用的初始状态，可以作为 State 的默认值。下面是一个实际的例子。
const defaultState = 0;
const reducer = (state = defaultState, action) => {
switch (action.type) {
case 'ADD':
return state + action.
const state = reducer(1, {
type: 'ADD',
payload: 2
上面代码中，reducer函数收到名为ADD的 Action 以后，就返回一个新的 State，作为加法的计算结果。其他运算的逻辑（比如减法），也可以根据 Action 的不同来实现。
实际应用中，Reducer 函数不用像上面这样手动调用，store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。
import { createStore } from 'redux';
const store = createStore(reducer);
上面代码中，createStore接受 Reducer 作为参数，生成一个新的 Store。以后每当store.dispatch发送过来一个新的 Action，就会自动调用 Reducer，得到新的 State。
为什么这个函数叫做 Reducer 呢？因为它可以作为数组的reduce方法的参数。请看下面的例子，一系列 Action 对象按照顺序作为一个数组。
const actions = [
{ type: 'ADD', payload: 0 },
{ type: 'ADD', payload: 1 },
{ type: 'ADD', payload: 2 }
const total = actions.reduce(reducer, 0); // 3
上面代码中，数组actions表示依次有三个 Action，分别是加0、加1和加2。数组的reduce方法接受 Reducer 函数作为参数，就可以直接得到最终的状态3。
3.7 纯函数
Reducer 函数最重要的特征是，它是一个纯函数。也就是说，只要是同样的输入，必定得到同样的输出。
纯函数是函数式编程的概念，必须遵守以下一些约束。
不得改写参数
不能调用系统 I/O 的API
不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果
由于 Reducer 是纯函数，就可以保证同样的State，必定得到同样的 View。但也正因为这一点，Reducer 函数里面不能改变 State，必须返回一个全新的对象，请参考下面的写法。
// State 是一个对象
function reducer(state, action) {
return Object.assign({}, state, { thingToChange });
return { ...state, ...newState };
// State 是一个数组
function reducer(state, action) {
return [...state, newItem];
最好把 State 对象设成只读。你没法改变它，要得到新的 State，唯一办法就是生成一个新对象。这样的好处是，任何时候，与某个 View 对应的 State 总是一个不变的对象。
3.8 store.subscribe()
Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。
import { createStore } from 'redux';
const store = createStore(reducer);
store.subscribe(listener);
显然，只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染。
store.subscribe方法返回一个函数，调用这个函数就可以解除监听。
let unsubscribe = store.subscribe(() =>
console.log(store.getState())
unsubscribe();
四、Store 的实现
上一节介绍了 Redux 涉及的基本概念，可以发现 Store 提供了三个方法。
store.getState()
store.dispatch()
store.subscribe()
import { createStore } from 'redux';
let { subscribe, dispatch, getState } = createStore(reducer);
createStore方法还可以接受第二个参数，表示 State 的最初状态。这通常是服务器给出的。
let store = createStore(todoApp, window.STATE_FROM_SERVER)
上面代码中，window.STATE_FROM_SERVER就是整个应用的状态初始值。注意，如果提供了这个参数，它会覆盖 Reducer 函数的默认初始值。
下面是createStore方法的一个简单实现，可以了解一下 Store 是怎么生成的。
const createStore = (reducer) => {
let listeners = [];
const getState = () =>
const dispatch = (action) => {
state = reducer(state, action);
listeners.forEach(listener => listener());
const subscribe = (listener) => {
listeners.push(listener);
return () => {
listeners = listeners.filter(l => l !== listener);
dispatch({});
return { getState, dispatch, subscribe };
五、Reducer 的拆分
Reducer 函数负责生成 State。由于整个应用只有一个 State 对象，包含所有数据，对于大型应用来说，这个 State 必然十分庞大，导致 Reducer 函数也十分庞大。
请看下面的例子。
const chatReducer = (state = defaultState, action = {}) => {
const { type, payload } =
switch (type) {
case ADD_CHAT:
return Object.assign({}, state, {
chatLog: state.chatLog.concat(payload)
case CHANGE_STATUS:
return Object.assign({}, state, {
statusMessage: payload
case CHANGE_USERNAME:
return Object.assign({}, state, {
userName: payload
上面代码中，三种 Action 分别改变 State 的三个属性。
ADD_CHAT：chatLog属性
CHANGE_STATUS：statusMessage属性
CHANGE_USERNAME：userName属性
这三个属性之间没有联系，这提示我们可以把 Reducer 函数拆分。不同的函数负责处理不同属性，最终把它们合并成一个大的 Reducer 即可。
const chatReducer = (state = defaultState, action = {}) => {
chatLog: chatLog(state.chatLog, action),
statusMessage: statusMessage(state.statusMessage, action),
userName: userName(state.userName, action)
上面代码中，Reducer 函数被拆成了三个小函数，每一个负责生成对应的属性。
这样一拆，Reducer 就易读易写多了。而且，这种拆分与 React 应用的结构相吻合：一个 React 根组件由很多子组件构成。这就是说，子组件与子 Reducer 完全可以对应。
Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer。
import { combineReducers } from 'redux';
const chatReducer = combineReducers({
statusMessage,
export default todoA
上面的代码通过combineReducers方法将三个子 Reducer 合并成一个大的函数。
这种写法有一个前提，就是 State 的属性名必须与子 Reducer 同名。如果不同名，就要采用下面的写法。
const reducer = combineReducers({
a: doSomethingWithA,
b: processB,
function reducer(state = {}, action) {
a: doSomethingWithA(state.a, action),
b: processB(state.b, action),
c: c(state.c, action)
总之，combineReducers()做的就是产生一个整体的 Reducer 函数。该函数根据 State 的 key 去执行相应的子 Reducer，并将返回结果合并成一个大的 State 对象。
下面是combineReducer的简单实现。
const combineReducers = reducers => {
return (state = {}, action) => {
return Object.keys(reducers).reduce(
(nextState, key) => {
nextState[key] = reducers[key](state[key], action);
return nextS
你可以把所有子 Reducer 放在一个文件里面，然后统一引入。
import { combineReducers } from 'redux'
import * as reducers from './reducers'
const reducer = combineReducers(reducers)
六、工作流程
本节对 Redux 的工作流程，做一个梳理。
首先，用户发出 Action。
store.dispatch(action);
然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。
let nextState = todoApp(previousState, action);
State 一旦有变化，Store 就会调用监听函数。
// 设置监听函数
store.subscribe(listener);
listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。
function listerner() {
let newState = store.getState();
component.setState(newState);
七、实例：计数器
下面我们来看一个最简单的实例。
const Counter = ({ value }) => (
&h1>{value}&/h1>
const render = () => {
ReactDOM.render(
&Counter value={store.getState()}/>,
document.getElementById('root')
store.subscribe(render);
上面是一个简单的计数器，唯一的作用就是把参数value的值，显示在网页上。Store 的监听函数设置为render，每次 State 的变化都会导致网页重新渲染。
下面加入一点变化，为Counter添加递增和递减的 Action。
const Counter = ({ value, onIncrement, onDecrement }) => (
&h1>{value}&/h1>
&button onClick={onIncrement}>+&/button>
&button onClick={onDecrement}>-&/button>
const reducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT': return state + 1;
case 'DECREMENT': return state - 1;
const store = createStore(reducer);
const render = () => {
ReactDOM.render(
value={store.getState()}
onIncrement={() => store.dispatch({type: 'INCREMENT'})}
onDecrement={() => store.dispatch({type: 'DECREMENT'})}
document.getElementById('root')
store.subscribe(render);
完整的代码请看。
Redux 的基本用法就介绍到这里，介绍它的高级用法：中间件和异步操作。
JavaScript 程序越来越复杂，调试工具的重要性日益凸显。客户端脚本有浏览器，Node 脚本怎么调试呢？
JavaScript 是单线程运行，异步操作特别重要。
2017年6月，TC39 委员会正式发布了《ES2017 标准》。
Web 技术突飞猛进，但是有一个领域一直无法突破 ---- 游戏。}