从 Redux 源码谈谈函数式编程

摘要 
 在 React 的世界中，状态管理方案不下几百种，但其中最经典的，莫过于 Redux 。如果你想学习函数式编程，那么 Redux 源码就是最好的学习材料。考虑到不少小伙伴用的是 Vue ，本人争取让这篇文章写得通俗易懂，让没有接触过 React 技术栈的同学也能掌握 Redux 。

  

• 全局状态唯一且不可变（Immutable） ，不可变的意思是当需要修改状态的时候，用一个新的来替换，而不是直接在原数据上做更改：
  

let store = { foo: 1, bar: 2 };
 // 当需要更新某个状态的时候
 // 创建一个新的对象，然后把原来的替换掉
 store = { ...store, foo: 111 };

状态更新通过一个纯函数（Reducer）完成。纯函数（Pure function）的特点是： 
  
  输出仅与输入有关； 
  引用透明，不依赖外部变量； 
  不产生副作用；

const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}

/**
 * @param {State} state 当前状态
 * @param {Action} action 描述如何更新状态
 * @returns 更新后的状态
 */
function reducer(state: State, action: Action): State

reducer函数的编写需要严格遵顼以下规则： 
  
  检查reducer是否关心当前的action 
  如果是，就创建一份状态的副本，使用新的值更新副本中的状态，然后返回这个副本 
  否则就返回当前状态

const initialState = { value: 0 }
function counterReducer(state = initialState, action) {
  if (action.type === 'counter/incremented') {
  return {
    ...state,
    value: state.value + 1
  }
  }
  return state
}

store.dispatch({ type: 'counter/incremented' })
console.log(store.getState())
// {value: 1}

// reducer.js
const initState = {
  userInfo: null,
  isLoading: false
};
export default function reducer(state = initState, action) {
  switch (action.type) {
  case 'FETCH_USER_SUCCEEDED':
    return {
    ...state,
    userInfo: action.payload,
    isLoading: false
    };
  case 'FETCH_USER_INFO':
    return { ...state, isLoading: true };
  default:
    return state;
  }
}

在上面代码中： 
  
  reducer首次调用的时候会传入initState作为初始状态，然后switch...case最后的default用来获取初始状态 
  在switch...case中还定义了两个action.type用来指定如何更新状态

// index.js
import { createStore } from "redux";
import reducer from "./reducer";
const store = createStore(reducer);

// index.js
// 每次更新状态后订阅 store 变化
store.subscribe(() => console.log(store.getState()));
// 获取初始状态
store.getState();
// 提交 action 更新状态
store.dispatch({ type: "FETCH_USER_INFO" });
store.dispatch({ type: "FETCH_USER_SUCCEEDED", payload: "测试内容" });

{ userInfo: null, isLoading: false } // 初始状态
{ userInfo: null, isLoading: true } // 第一次更新
{ userInfo: "测试内容", isLoading: false } // 第二次更新

// src/createStore.ts
function createStore(reducer, preloadState = undefined) {
  let currentReducer = reducer;
  let currentState = preloadState;
  let listeners = [];
  const getState = () => {
  return currentState;
  }
  const subscribe = (listener) => {
  listeners.push(listener);
  }
  const dispatch = (action) => {
  currentState = currentReducer(currentState, action);
  for (let i = 0; i < listeners.length; i++) {
    const listener = listeners[i];
    listener();
  }
  return action;
  }
  
  dispatch({ type: "INIT" });
  return {
  getState,
  subscribe,
  dispatch
  }
}

createStore 的调用链路如下： 
  
  首先调用 createStore 方法，传入 reducer 和 preloadState 。preloadState 代表初始状态，假如不传那么 reducer 必须要指定初始值； 
  将 reducer 和 preloadState 分别赋值给 currentReducer 和 currentState 用于创建闭包； 
  创建 listeners 数组，这其实就是基于发布订阅模式，listeners 就是发布订阅模式的事件中心，也是通过闭包缓存； 
  创建 getState 、subscribe 、dispatch 等函数； 
  调用 dispatch 函数，提交一个 INIT 的 action 用来生成初始state，在 Redux 源码中，这里的 type 是一个随机数； 
  最后返回一个包含 getState 、subscribe 、dispatch 函数的对象，即 store 实例；

type State = Object;
type Action = {
  type: string;
  payload?: Object;
}
type Reducer = (state: State, action: Action) => State;
// 定义 IRedux 接口
interface IRedux {
  getState(): State;
  dispatch(action: Action): Action;
}
// 实现 IRedux 接口
class Redux implements IRedux {
  // 成员变量设为私有
  // 相当于闭包作用
  private currentReducer: Reducer;
  private currentState?: State;
  constructor(reducer: Reducer, preloadState?: State) {
  this.currentReducer = reducer;
  this.currentState = preloadState;
  this.dispatch({ type: "INIT" });
  }
  
  public getState(): State {
  return this.currentState;
  }
  public dispatch(action: Action): Action {
  this.currentState = this.currentReducer(
    this.currentState,
    action
  );
  return action;
  }
}
// 通过工厂模式创建实例
function createStore(reducer: Reducer, preloadState?: State) {
  return new Redux(reducer, preloadState);
}

const middleware =
  (store) =>
  (next) =>
    (action) => {
    // ...
    }

const middleware = function(store) {
  return function(next) {
  return function(action) {
    // ...
  }
  }
}

export default function applyMiddleware<Ext, S = any>(
  ...middlewares: Middleware<any, S, any>[]
): StoreEnhancer<{ dispatch: Ext }>

import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk"; // 使用 thunk 中间件
import reducer from "./reducer";
const store = createStore(reducer, applyMiddleware(thunk));

function createStore(reducer: Reducer, preloadedState?: PreloadedState | StoreEnhancer, enhancer?: StoreEnhancer): Store

// src/createStore.ts:71
if (
  (typeof preloadedState === 'function' && typeof enhancer === 'function') ||
  (typeof enhancer === 'function' && typeof arguments[3] === 'function')
) {
  // 传递两个函数类型参数的时候，抛出异常
  // 也就是只接受一个 storeEnhancer
  throw new Error();
}

// src/createStore.ts:82
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
  enhancer = preloadedState as StoreEnhancer<Ext, StateExt>
  preloadedState = undefined
}

// src/createStore.ts:87
if (typeof enhancer !== 'undefined') {
  // 如果使用了 enhancer
  if (typeof enhancer !== 'function') {
  // 如果 enhancer 不是函数就抛出异常
  throw new Error();
  }
  // 直接返回调用 enhancer 之后的结果，并没有往下继续创建 store
  // enhancer 肯定是一个高阶函数
  // 先传入了 createStore，又传入 reducer 和 preloadedState
  // 说明很有可能在 enhancer 内部再次调用 createStore
  return enhancer(createStore)(
  reducer,
  preloadedState
  )
}

// src/applyMiddleware.ts
import compose from './compose';
function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState) => {
  const store = createStore(reducer, preloadedState);
  let dispatch = () => {
    throw new Error();
  }
  const middlewareAPI = {
    getState: store.getState,
    dispatch: (action, ...args) => dispatch(action, ...args)
  }
  const chain = middlewares.map(middleware => middleware(middlewareAPI));
  dispatch = compose(...chain)(store.dispatch);
  return {
    ...store,
    dispatch
  }
  }
}

const applyMiddleware = (...middlewares) =>
  (createStore) =>
  (reducer, preloadedState) => {
    // ...
  }

分析一下源码中的调用链路： 
  
  调用 applyMiddleware 时，传入中间件实例，返回 enhancer 。从剩余参数的用法看出，支持传入多个 middleware ； 
  由createStore调用 enhancer ，分两次传入 createStore 和 reducer 、preloadedState ； 
  内部再次调用 createStore ，这次由于没有传 enhancer ，所以直接走创建 store 的流程； 
  创建一个经过修饰的 dispatch 方法，覆盖默认 dispatch ； 
  构造 middlewareAPI ，对 middleware 注入 middlewareAPI ； 
  将 middleware 实例组合为一个函数，再向 middleware 传递默认的 store.dispatch 方法； 
  最后返回一个新的 store 实例，此时 store 的 dispatch 方法经过了 middleware 修饰；

// src/compose.ts:46
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))
  )
}

思考题：如果希望把执行顺序改为从左往右，需要怎么改？

function middleware({ dispatch, getState }) {
  // 接收 middlewareAPI
  return function(next) {
  // 接收默认的 store.dispatch 方法
  return function(action) {
    // 接收组件调用 dispatch 传入的 action
    console.info('dispatching', action);
    let result = next(action);
    console.log('next state', store.getState());
    return result;
  }
  }
}

看到这里，我想大多数读者都会有两个问题： 
  
  通过 middlewareAPI 获取的 dispatch 函数和 store 实例最终暴露的 dispatch 函数都是经过修饰的吗； 
  为了防止在创建 middleware 的时候调用 dispatch ，applyMiddleware 给新的 dispatch 初始化为一个空函数，且调用会抛出异常，那么这个函数究竟在何时被替换掉的；

// 定义新的 dispatch 方法
// 此时是一个空函数，调用会抛出异常
let dispatch = () => {
  throw new Error();
}
// 定义 middlewareAPI
// 注意这里的 dispatch 是通过闭包形式引入的
const middlewareAPI = {
  getState: store.getState,
  dispatch: (action, ...args) => dispatch(action, ...args)
}
// 对 middleware 注入 middlewareAPI
// 此时在 middleware 中调用 dispatch 会抛出异常
const chain = middlewares.map(middleware => middleware(middlewareAPI));

// 将 dispatch 替换为正常的 dispatch 方法
// 注意闭包中的值也会相应更新，middleware 可以访问到更新后的方法
dispatch = compose(...chain)(store.dispatch);

function(action) {
  // 注意这里存在闭包
  // 可以获取到中间件初始化传入的 dispatch、getState 和 next
  // 如果你打断点，可以在 scope 中看到闭包的变量
  // 同时注意这里的 dispatch 就是这个函数本身
  console.info('dispatching', action);
  let result = next(action);
  console.log('next state', store.getState());
  return result;
}

setTimeout(() => {
  this.props.dispatch({ type: 'HIDE_NOTIFICATION' })
}, 5000)

确实可以！Redux 作者 Dan Abramov 在 Stackoverflow 上面有一个非常好的回答，其中就赞同了这种用法： 
 https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559

  

• Redux 确实提供了一些处理异步 Action 的替代方法，但应该只在当你意识到你编写了大量模板代码的时候再去使用。否则就用最简单的方案（如无必要，勿增实体）；  
  
• 当多个组件需要用到同一个 action.type 时，为避免 action.type 拼写错误，需要抽离公共的 actionCreator，例如：
  

// actionCreator.js
  export function showNotification(text) {
  return { type: 'SHOW_NOTIFICATION', text }
  }
  export function hideNotification() {
  return { type: 'HIDE_NOTIFICATION' }
  }
  // component.js
  import { showNotification, hideNotification } from '../actionCreator'
  this.props.dispatch(showNotification('You just logged in.'))
  setTimeout(() => {
  this.props.dispatch(hideNotification())
  }, 5000)

  

• 上面的逻辑在简单场景下完全可行，但是随着业务复杂度增加会出现几个问题：
  

  

• 通常状态更新有好几个步骤，而且存在逻辑上的先后顺序，例如通知的展示和隐藏，导致模板代码较多；  
  
• 提交的 action 没有状态，如出现竞争条件可能导致状态更新出 bug ；
  

  

• 出于上面的问题，需要抽离异步的 actionCreator ，把涉及状态更新的操作封装进去，便于复用，同时为每次 dispatch 生成唯一 id ：
  

// actions.js
  function showNotification(id, text) {
  return { type: 'SHOW_NOTIFICATION', id, text }
  }
  function hideNotification(id) {
  return { type: 'HIDE_NOTIFICATION', id }
  }
  let nextNotificationId = 0
  export function showNotificationWithTimeout(dispatch, text) {
  const id = nextNotificationId++
  dispatch(showNotification(id, text))
  setTimeout(() => {
    dispatch(hideNotification(id))
  }, 5000)
  }

// component.js
  showNotificationWithTimeout(this.props.dispatch, 'You just logged in.')
  // otherComponent.js
  showNotificationWithTimeout(this.props.dispatch, 'You just logged out.')

  

• 细心的同学应该注意到，这边传递了 dispatch 。这是因为，正常来说只有组件中能访问到 dispatch ，为了能让外部封装的函数也能访问，我们需要将 dispatch 作为参数传过去；  
  
• 这时有些同学会提出质疑，如果将 store 作为全局单例，不就可以直接访问了：
  

// store.js
  export default createStore(reducer)
  // actions.js
  import store from './store'
  // ...
  let nextNotificationId = 0
  export function showNotificationWithTimeout(text) {
  const id = nextNotificationId++
  store.dispatch(showNotification(id, text))
  setTimeout(() => {
    store.dispatch(hideNotification(id))
  }, 5000)
  }
  // component.js
  showNotificationWithTimeout('You just logged in.')
  // otherComponent.js
  showNotificationWithTimeout('You just logged out.')

  

• 上面这样从操作上来说确实可行，但是 Redux 团队并不赞同单例的写法。他们的理由是，如果 store 变为单例，会导致服务端渲染的实现变得困难，同时测试也不方便，如要改用 mock store 需要修改所有 import ；  
  
• 基于上面的原因，Redux 团队还是建议使用函数参数将 dispatch 传递出去，尽管这样很麻烦。那么有没有一种解决方案呢？有的，使用 Redux-thunk 就解决了这个问题；  
  
• 实际上，Redux-thunk 的作用是教 Redux 识别函数类型的特殊 Action ；  
  
• 中间件启用后，当 dispatch 的 Action 为函数类型，Redux-thunk 就会给这个函数传入 dispatch 作为参数，需要注意最终 reducer 拿到的仍然是普通 JavaScript 对象作为 Action ：
  

// actions.js
  function showNotification(id, text) {
  return { type: 'SHOW_NOTIFICATION', id, text }
  }
  function hideNotification(id) {
  return { type: 'HIDE_NOTIFICATION', id }
  }
  let nextNotificationId = 0
  export function showNotificationWithTimeout(text) {
  return function (dispatch) {
    const id = nextNotificationId++
    dispatch(showNotification(id, text))
    setTimeout(() => {
    dispatch(hideNotification(id))
    }, 5000)
  }
  }

// component.js
  this.props.dispatch(showNotificationWithTimeout('You just logged in.'))

// src/index.ts:15
function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) =>
  next =>
    action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument)
    }
    return next(action)
    }
}

({ dispatch, getState }) =>
  next =>
  action => {
    if (typeof action === 'function') {
    return action(dispatch, getState, extraArgument)
    }
    return next(action)
  }

// 注意这里可以访问到闭包中的 dispatch、getState 和 next
// 初始化完成后的 dispatch 实际上就是下面这个函数本身
action => {
  if (typeof action === 'function') {
  return action(dispatch, getState, extraArgument)
  }
  return next(action)
}

// actions.js
const setUserInfo = data => ({
  type: "SET_USER_INFO",
  payload: data
})
export const getUserInfoAction = userId => {
  return dispatch => {
  getUserInfo(userId)
    .then(res => {
    dispatch(setUserInfo(res));
    })
  }
}
// component.js
import { getUserInfoAction } from "./actionCreator";
this.props.dispatch(getUserInfoAction("666"));

if (typeof action === 'function') {
  return action(dispatch, getState, extraArgument)
}

return next(action);

https://redux.js.org 
 https://github.com/reduxjs/redux 
 https://github.com/reduxjs/redux-thunk 
 https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559 
 coding优雅指南：函数式编程