深刻浅出理解Redux

Redux是什么

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

它认为：Web应用是一个状态机，视图与状态一一对应。从架构层面来讲，一般但愿UI跟数据、逻辑分离，直观体现就是：UI = render(state)

为何要用Redux

如今的Web应用涉及大量数据交互、异步操做等，无疑都在增长前端的复杂性，须要维护的state也愈来愈多。而Redux就是试图让每一个state变化都是可预测，将应用中全部的action与state统一管理。

Redux的三原则

• 单一数据源 整个应用state应该只存储在惟一一个的Store中。
• 保持状态只是只读 不能直接修改state，惟一能改变Store的state方法就是经过触发一个action对象完成。
• 数据改变经过纯函数完成 action改变state须要经过reducers。

Redux工做流程

在讲Redux的工做流程以前，需了解几个Redux相关的核心概念：

• Action：Action能够当作是应用发出的通知，表示State应该要发生变化了，Action的触发多是用户对View层的操做也多是服务器的响应。
• Action Creator：若是有不少种Action，而每种Action都手写的话显得麻烦，因此用定义的Action Creator函数来生成Action。
• Dispatch：Action发出的惟一方法。
• Store：整个应用惟一保存数据的地方。
• State：对Store中保存数据生成某个时点数据快照，该数据集合叫作State。
• Reducer：Action只是描述了State应要发生变化，而Reducer作的是如何改变State。

具体工做流程： 用户经过View（或服务器响应）触发Action，Dispatch方法将Action Creator函数生成的Action派发到Store，Store自动调用Reducer，并向它传入当前State和Action，Reducer返回新的State，State一旦有变化，Store就会经过监听函数来更新View。 借用一张图来描述这一过程：

严格的单向数据流是 Redux 架构的设计核心。

几个Redux核心概念实例

以从服务器响应文章内容为例 Action

const LOAD_ARTICLES_DETAIL = 'LOAD_ARTICLES_DETAIL'
const LOAD_ARTICLES_DETAIL_SUCCESS = 'LOAD_ARTICLES_DETAIL_SUCCESS'
const LOAD_ARTICLES_DETAIL_ERROR = 'LOAD_ARTICLES_DETAIL_ERROR'
复制代码

Action Creator

export const loadArticlesDetail = () => ({
  type: LOAD_ARTICLES_DETAIL
})
export const loadArticlesDetailSuccess = result => ({
  type: LOAD_ARTICLES_DETAIL_SUCCESS,
  result
})
export const loadArticlesDetailFailure = error => ({
  type: LOAD_ARTICLES_DETAIL_ERROR,
  error
})
复制代码

Store

const store = createStore(reducers)
复制代码

Reducer (previousState, action) => (newState)

export default (state = initalState, action) => {
switch (action.type) {
case LOAD_ARTICLES_DETAIL: {
  return {
    ...state,
    loading: true,
    error: false
  }
}
case LOAD_ARTICLES_DETAIL_SUCCESS: {
  return {
    ...state,
    loading: false,
    error: false,
    articlesDetail: action.result
  }
}
case LOAD_ARTICLES_DETAIL_ERROR: {
  return {
    ...state,
    loading: false,
    error: true
  }
}
default:
  return state
}
}

复制代码

深刻到Redux的源码

Redux主要源码总体结构：

• 入口文件 index.js

export {
  createStore,
  combineReducers,
  bindActionCreators,
  applyMiddleware,
  compose
}
复制代码

这是入口文件导出的方法，也是Redux支持的方法，这些方法的实如今主工做流程文件和辅助函数文件，接下来看主工做流程。

• 主工做流程文件 createStore.js createStore方法主要是生成Store，看看它作了哪些事儿：
  • getState方法返回了当前State
  • subscribe方法传入函数到监听队列和返回取消订阅函数
  • dispatch方法调用Reducer，按顺序执行listener，返回Action 辅助源码文件：
• applyMiddleware.js：用于加强Store

export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    const store = createStore(reducer, preloadedState, enhancer)
    let dispatch = store.dispatch
    let chain = []

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}
复制代码

从源码上看，最后是返回了一个Store和一个被更新过的dispatch方法，实现了对Store的加强。

• bindActionCreators.js：

export default function bindActionCreators(actionCreators, dispatch) {
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch)
  }
}
复制代码

使用dispatch把action creator都包装起来，这样能够直接调用它们。

• combineReducers.js：当应用比较大的时而拆分Reducer，可是传入Store的Reducer必须是一个函数，因此这个方法的主要功能是用来合并多个Reducer。
• compose.js

  export default function compose(...funcs) {
    if (funcs.length === 0) {
      return arg => arg
    }
  
    if (funcs.length === 1) {
      return funcs[0]
    }
  
    return funcs.reduce((a, b) => (...args) => a(b(...args)))
  }
  复制代码

  compose这个方法，传入的一系列函数，执行的最终结果是把各个函数串联起来。

---

总结：

• Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
• 严格的单向数据流是 Redux 架构的设计核心。
• UI = render(state)