Redux：pre

If you aren't familiar with state management libraries like Redux or MobX, don't use context. For many practical applications, these libraries and their React bindings are a good choice for managing state that is relevant to many components. It is far more likely that Redux is the right solution to your problem than that context is the right solution.

React中有个名为context的API，它能帮我们在组件树中传递数据,然而官方文档强调不推荐我们使用，它认为大多数情况下这个api不是必要的，而且可能会影响React应用的稳定。这个属于试验性质的API在未来可能会被取缔。Redux或Mobx是推荐的选择。所以我不研究context了。

Redux的创造者强调，redux不是必须的。但是，我们既然学了React，自然要了解下Redux是个什么鬼。redux的作者一开始想写一个针对React的状态管理插件，然后写出了redux这东西，并把它称作： “ a predictable state container for JavaScript apps”（js应用的可预测状态容器），可以和其他构建视图层的框架使用。Redux借鉴了Facebook的Flux,但有意避开了Flux的复杂性。

开始学习Redux基础之前，文档给我们讲了6个点，现在只需要关注前三个：

1.Motivation

随着SPA复杂度增强，我们会有许多状态量要控制，有的来自服务器响应、有的来自本地存储、有的来自运行时创建的数据。而且有些状态是共享的，某个状态改变之后，会引起连锁导致其他视图组件更新。这时候我们管理状态、追踪状态变化会很麻烦。为了使得状态变得可控，即“ how and when updates can happen”，Redux试图对此施加明确的限制。

2.Core Concepts

在React中，我们改变state用的是其所在组件的setState方法；在Redux中，为了使得state的改变更可控、对开发者更友好（可见），它不直接使用setState，而是用js设计了一个中间层。其中的两个关键字是“action”和“reducer”。

action：

当我们要触发一个state的改变时，我们（按照redux的规矩）要先dispatch（派遣、发送）一个action。所谓action，就是一个纯js对象，其属性包括：触发state改变的原因/描述、state更新可能需要的数据。如：

 { type: 'ADD_TODO', text: 'Go to swimming pool' }

 { type: 'TOGGLE_TODO', index: 1 }

 { type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

reducer：

要使得 action 能和 state的更新 联系起来，我们需要写一个函数，这个函数就是reducer，它把state和action作为参数，并返回一个新的、改变后的state的状态。因此，当追踪state的改变时，我们可以定位在reducer函数中，查看其action参数，从而确定state变化的原因。

 function visibilityFilter(state = 'SHOW_ALL', action) {

   if (action.type === 'SET_VISIBILITY_FILTER') {

     return action.filter

   } else {

     return state

   }

 }

 function todos(state = [], action) {

   switch (action.type) {

     case 'ADD_TODO':

       return state.concat([{ text: action.text, completed: false }])

     case 'TOGGLE_TODO':

       return state.map(

         (todo, index) =>

           action.index === index

             ? { text: todo.text, completed: !todo.completed }

             : todo

       )

     default:

       return state

   }

 }

上面是文档中两个reducer函数的示例，它们都接收了 带默认值 的state、action，并返回更新后的state。其中第二个示例根据action的type执行对应的更新。这让state更新的诱因一目了然。

3.Three Principles

Single source of truth：

在读react文档的时候好几次出现这短语，根据维基的解释，意思是：在信息系统中，数据只需要存储一次，往后其他地方对该数据的连接/使用都只能通过引用的方式。一般的实现方式是创建一个单例，把数据按某种结构存放其中，而外部的其他代码要用到里面的某个数据时，引用它。

Redux中，app的所有state都存放在一个叫store的单例中，并以对象树的结构组织起来。

State is read-only：The only way to change the state is to emit an action, an object describing what happened.

如前面所述，在Redux中，改变state的方式不再是使用setState，而是 dispatch 一个action，并在reducer函数中返回新的更新后的state。 dispatch 也是单例store的一个api，用于触发state更新。

 store.dispatch({

   type: 'COMPLETE_TODO',

   index: 1

 })

 store.dispatch({

   type: 'SET_VISIBILITY_FILTER',

   filter: 'SHOW_COMPLETED'

 })

Changes are made with pure functions：

reducer只是纯粹的函数，返回的是一个新的state对象。

* 4.Prior Art： 这章主要讲redux和flux等插件的异同，可以直接跳过，有兴趣再细看

只是里面提到几个点：

1.不鼓励在reducer中改变state，而是返回一个新的state。用Object.assign（）或对象扩展运算符{...obj,name:value}手段很轻易能实现。

2.redux中不在意你用什么形式组织state，用纯粹js对象形式、Immutable object（Immutable 是一款js插件）或其他。

*3.作者推荐使用RxJS和Redux一起构建复杂的异步应用，这个先不管。

5.Ecosystem：提到了redux相关的一些插件

6.Examples：一些小示例