Redux 相关概念及源码分析

划重点：

• 三个概念：(state, action) => state

  • store
  • action，例如：{type: 'COMPLETE_TODO',index: 1}
  • reducer，只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。
• 三个原则：单一数据源，State 是只读的，使用纯函数执行修改

概念相关源码

createStore

首先我们先看下 createStore 的参数列表及其返回值：

export default function createStore(reducer, preloadedState, enhancer) {
  // 第一个参数reducer（function类型），preloadedState是初始state，enhancer参见下面解释
  // 第二，第三参数可为空，可互换，这里不列源码了

  // ...

  // 返回一个包含一大堆函数的对象，具体作用我们后面看，这里我们首先知道它是返回了一个对象
  return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }
}

Store Enhancers

enhancers 英语译为“增强剂”，其实作用也的确如此。用一个表达式来解释：

// f方法对 g 方法做了一些功能增强
h(x) = f(g(x));

例如：

const g = (t)=>{
  console.log(`do ${t} task`);
}
const f = (func) => {
  console.log('add enhancers');
  return func;
}
const h = f(g);
h('first');

其实 Store Enhancers 也就是这个概念，来看相关源码：

export default function createStore(reducer, preloadedState, enhancer) {
  // ...
  if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function.')
    }
    return enhancer(createStore)(reducer, preloadedState)
  }
  // ...
}

从源码中可以看出两点：

1. redux 会把 createStore 函数传给我们写的 enhancer
2. 同时 reducer,preloadedState参数也会传给我们

不知道这样是不是很清晰了？我们来写一个例子，功能类似简化版的 redux-logger，可以在每个dispatch时打印日志。

function createLogger(createStore){
  return (reducers,initialState) => {
    const store = createStore(reducers, initialState);
    function dispatch(action){
      console.log(`dispatch an action: ${JSON.stringify(action)}`);
      const res = store.dispatch(action);
      const newState = store.getState();
      console.log(`current state: ${JSON.stringify(newState)}`);
      return res;
    }
    return {...store,dispatch};
  }
}
var store = Redux.createStore(counter,createLogger);

这样就实现了一个记录日志的功能，每次 dispatch 的时候都会记录。
有些人可能想到了，enhancer权力好像有些大？是的，它可以增强 store 的行为，同时也可能破坏它，所以大家写 enhancers 的时候一定要注意：__不要破坏了Redux的原有工作流__。比如上面例子中这行代码就保证了 Redux 原本的工作流。

const res = store.dispatch(action);

Middleware

可能会有人还不知道 Middleware 的含义，还是来解释一下吧，说洋葱模型可能太文艺了，举这么个例子吧，超级玛丽为了救公主要经历 1-1,1-2,1-3,1-4...8-4 关，才能救到公主，这里的每一关就可以理解成一个Middleware，只不过现在我们是游戏制作人，关卡由我们来设定。

如果你看了上面的实例，可能会想 redux-logger 不是一个 Middleware 吗？和 store enhancers 是什么关系啊？我们先来看一下在 redux 中如何定义一个 Middleware，举官网上的例子：

import { createStore, combineReducers, applyMiddleware } from 'redux'
let todoApp = combineReducers(reducers)
let store = createStore(
  todoApp,
  applyMiddleware(logger, crashReporter)
)

大家再回想上面例子的代码：

var store = Redux.createStore(counter,createLogger);

是不是很相似呢？没错，原理都是一个。这里调用了 Redux 提供的 applyMiddleware 方法，从而实现了我们上面的过程。所以，我把这里的 Middleware 归纳成 __一个只可以扩展 dispatch 方法的 Store Enhancers__。下面列出 applyMiddleware 方法的源码吧，很简单相信大家都可以看懂。

export default function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)
    let dispatch = () => {
      throw new Error(
        `Dispatching while constructing your middleware is not allowed. ` +
          `Other middleware would not be applied to this 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
    }
  }
}

reducer enhancers

顾名思义，reducer的“增强剂”。首先我们再回到 createStore 中，第一个参数我们需要定义reducers，不考虑state分割的情况下，我们可能会定义成这样：

function counter(state, action) {
  if (typeof state === 'undefined') {
    return 0
  }

  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

然而这个“模板”是一直从 Redux 文档中流传下来的，但如果我写成这样呢？

function counter(state,action){
  //我啥也不做
}

实时证明在写成这样在 createStore 的时候也可以通过的，只不过在store.getState()的时候是undefined。

所以，个人认为没有什么 reducer enhancers 的概念。

dispatch 的时候是如何调用 reducer 的

其实很简单，直接看源码：

  function dispatch(action) {
    // 各种判断
    try {
      isDispatching = true
      // 正常情况下 currentReducer 就是我们传进去的 reducer
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

    const listeners = (currentListeners = nextListeners)
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action
  }

上述代码中，我们还看到 dispatch 的时候还会调用 listener()，listeners 是通过 subscribe 方法来订阅的，比如通常我们所做的会把 render 方法添加到这里。这样就可以实现数据变化后重新渲染了。