redux 初识

前言

Redux 试图让 state 的变化变得可预测

react／react-native 将组件的更新交给了状态机（state），想要更新页面活着页面的某个组件就必须得经过改变state的方式。页面越复杂，组件越多，所须要的state就越多，而且随着页面的交互，state也须要不断得变化，而管理这些不断变化的 state 就变的很是困难。终有一刻，不可胜数的 state 会让你以为 state 的变化已然不受控制。

"若是你不知道是否须要 Redux，那就是不须要它。"

Redux主要做用是让应用的 state 能够集中管理，从而达到清晰管理每一个 state，因此当你的应用很简单时，彻底不须要使用redux，它会增长你的工做量。

三大原则

Redux 主要是经过限制 state 更新发生的时间和方式来实现 state 的管理。而这些限制条件则反应在三大原则中：

单一数据源

整个应用的 state 被储存在一棵 object tree 中，而且这个 object tree 只存在于惟一一个 store 中。

State 只读

唯一改变 state 的方法就是触发 action。

确保视图和网络请求都不能直接修改 state，它们能够表达想要修改的意图（actio），而后经过这个触发意图（action）来修改 state。

使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你须要编写 reducers。

Reducer 是纯函数，它接收先前的 state 和 action，并返回新的 state。

Action、Reducer 和 Store

Action

action是一个普通对象，用于指明用户的操做行为，它是把数据从应用传到 store 的有效载荷，是 store 数据的惟一来源。一般将新数据（state）传入action发送给store。

const EAT_APPLE = 'EAT_APPLE'

{
  type: EAT_APPLE,
  text: 'eat an apple'
}

这里定义了一个action对象，它有type和text俩个键，其中type是必需的，用于描述当前action；text是自定义的，做为承载数据的载体。

Action 建立函数

Action建立函数就是生成 action 的方法，，调用这个函数会建立action，一般只返回一个简单的action对象。它的做用主要是为了减小重复大量地建立action。

function eat(text) {
 return {
   type: EAT_APPLE,
   text
 }
}

Reducer

reducer根据action操做来作出不一样的数据响应，指明应用如何更新 state。它是一个纯函数，只作数据处理。

(previousState, action) => newState

它接收俩个参数：action和state，并return一个新的state。

纯函数(一样的输入，一定获得一样的输出)：

• 修改传入参数；
• 执行有反作用的操做，如 API 请求和路由跳转；
• 调用非纯函数，如 Date.now() 或 Math.random()。

//使用ES6参数默认值语法初始化state
function toEat(state = {behavior: ""}, action) {
  if (typeof state === 'EAT_APPLE') {
    return Object.assign({}, state,{
        behavior: action.text
    }}
  }
  
  return state；
}

注意：

• 不要修改 state，Object.assign() 新建了一个副本
• 在无匹配action的状况下返回旧的 state

因为redux单一数据源，因此整个应用只有一个单一的 store，因此当须要拆分数据处理逻辑时，你应该使用 reducer 组合 而不是建立多个 store。

Redux 提供了一个combineReducers方法，用于 Reducer 的合并：

combineReducers({reducer,...})

Store

Redux 应用只有一个单一的 store。

store有如下方法：

• createStore(reducer,[preloadedState])

  根据传入的reducer建立一个store。这个函数的第二个参数是可选的，用于设置 state 初始状态。

• store.getState()

  获取当前state的值。

• store.dispatch(action)

  向store派遣一个action。即向store传值。

• store.subscribe(listener)

  注册监听器，监听store，一旦store变化，会触发listener。该函数会返回一个函数用于注销该监听器。

工做流程

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

从上图能够看出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实现数据的发送、监听、获取，从而实现单向数据流的流动