浅谈Redux框架

什么是Redux

"只有遇到 React实在解决不了的问题，你才需要 Redux 。"

Redux是由FaceBook提出的Flux框架演变而来的，所以先明确一点，Redux 是一个有用的架构，但不是非用不可。事实上大多数情况，你可以不用它，只用 React 就够了。有人说过这样一句话："如果你不知道是否需要 Redux，那就是不需要它。"Redux 的创造者 Dan Abramov 又补充了一句：

简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。

•   用户的使用方式复杂。

•   不同身份的用户有不同的使用方式（比如普通用户和管理员）。

•   多个用户之间可以协作。

•   与服务器大量交互，或者使用了WebSocket。

•   View要从多个来源获取数据。

   简而言之，Redux的适用场景：多交互，多数据源。

Redux的设计

    对于复杂的单页面应用，状态（state）管理非常重要。state可能包括：服务端的响应数据、本地对响应数据的缓存、本地创建的数据（比如，表单数据）以及一些 UI的状态信息（比如，路由、选中的 tab、是否显示下拉列表、页码控制等等）。如果 state变化不可预测，就会难于调试（state不易重现，很难复现一些 bug）和不易于扩展。

    Redux 就是用来确保 state变化的可预测性，主要的约束有：

•   state以单一对象存储在 store对象中。

•   state只读。

•   使用纯函数 reducer执行 state更新。

state 为单一对象，只能通过 dispatch(action)来触发更新，更新逻辑由 reducer来执行。Redux主要还涉及以下几个概念：

•   store：一个对象，它包含着应用的所有信息：

     管理应用的 state

     通过 store.getState()可以获取 state

     通过 store.dispatch(action)来触发 state更新

     通过 store.subscribe(listener)来注册 state变化监听器

     通过 createStore(reducer, [initialState])创建

•   action：一个对象，包含着动作的信息(至少要包含一个`type`属性，用来描述

    发生了什么事)。

•   reducer：是一个纯函数，函数签名为 (previousState, action) => newState，

即接受 previousState和 action两个参数，根据 action中携带的信息对 previousState做出相应的处理，并返回一个新的 state。

一个清晰的流程图能帮我们更好的理解：

从上图可以看出redux处理的是一个单向数据流：

•   用户行为或者程序调用 store.dispatch(action)，向store派遣action；

•   store在接收到action后，会自动呼起reducer来处理action，并且会传入俩个参

数（当前 State和收到的 Action），这里reducer可以依据数据处理逻辑拆分成多个,但是数据源store只能是一个；

•   combineReducers函数会将多个子 reducer输出合并成一个单一的state树

•   生成新的UI

总结

1  如果你的页面不是很复杂，则并不需要Redux，记住它的适用场景：

  多交互，多数据源；

2  redux通过限制数据更新发生的时间和方式来达到管理state的目的；

3  redux三大原则：单一store、reducer纯函数、state只读

4  在 createStore和 reducer函数中都可以初始化state。

5 redux通过dispatch、subscribe、getState实现数据的发送、监听、获取，

    从而实现单向数据流的流动。