Redux

你知道 React.js 是个前端应用框架，但你经常看到它跟 Redux 一块儿出现，于是就懵了。Redux 可以作为应用里面的一部分，它可以帮我们管理应用里面的数据（State Management）。应用复杂到一定程度的时候，你需要一套更好的方法来控制各种组件上面显示的数据。

宁皓网最近推出的 Redux 课程，帮你理解 Redux 上的核心概念，还介绍了在 React 应用上使用 Redux 的方法。如果你用的是 Vue.js 框架，可以使用 Vuex 来管理应用数据。

订阅宁皓网，来学一下用 React.js 开发前端应用。

Redux 应用里的数据流是单向的。数据的生命周期有四个阶段：

1. 调用 store.dispatch(action).

   一个动作就是一个纯对象，描述了发生的事情，比如：

    { type: 'LIKE_ARTICLE', articleId: 42 }
    { type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } }
    { type: 'ADD_TODO', text: 'Read the Redux docs.' }
   

   把动作想成是一些简要的新闻： “Mary liked article 42.” ， “‘Read the Redux docs.' was added to the list of todos.”。在应用的任何地方你可以调用 store.dispatch(action)，包括组件，XHR 回调等等。

Redux 应用里的 Actions 表示在应用里发生的事情，Reducers 会根据发生的事情去更新应用的状态。再来了解一下 Store。

Store 的主要任务是：

1. 持有应用的状态。
2. 允许访问状态：getState()。
3. 允许更新状态：dispatch(action)。
4. 注册监听器：subscribe(listener)。
5. 用 subscribe(listener) 返回的东西，可以注销监听器。

注意在 Redux 应用里只有一个 Store。如果想分离数据处理逻辑，可以使用组合 Reducer 的方式。

有了 Reducer ，很容易用它去创建一个 Store 。之前我们用 combineReducers() 把几个 Reducer 组合成了一个，现在我们可以去导入它，然后把它交给 createStore()。

Actions 描述了在应用里面发生的事情，但是应用的状态（state）具体应该怎么样响应这些动作是 Reducers 的任务。

设计状态

state（状态），指的就是数据。在 Redux 里，应用的所有的状态都会存储在唯一的一个对象里。写代码之前最好先想想这个对象的形状。

比如我们的任务列表应用，会存储两种东西：

1. 当前所选的可见性过滤器
2. 任务列表项目

在状态树里会存储数据还有一些 UI（界面） 状态，最好让数据与 UI 状态分开。

动作（Actions）。在 Redux 的动作里会带着发送给 Store 的信息，动作是 Store 的唯一信息来源，可以使用 store.dispatch() 把动作发送给 Store。

下面就是一个动作，这个动作表示的是添加新的任务项目（假设这个动作来自一个任务列表应用）：

const ADD_TODO = 'ADD_TODO'

{
  type: ADD_TODO,
  text: 'Build my first Redux app'
}

动作其实就是一个 JavaScript 对象，它里面必须得有个 type 属性，这个属性表示的是要执行的动作的类型，也就是在你的应用里会发生的一些事情。一般这个类型的值是一个字符串恒量，但这并不是必须的，你可以直接使用一个普通的字符串表示动作，但是对于大型应用来说，让动作的名字使用恒量是有好处的。在动作对象里，除了必须的 type 属性以外，你可以在这个对象里放任何东西。你可以参考 Flux Standard Action ，学习动作的结构。