简易 redux

背景

Redux 常常配合 react-redux 作为状态管理应用在 React 的项目中，并且基于 redux 发展出了 dva 之类的诸多状态管理工具。

说来惭愧，虽然在项目中常常使用到，但是并未阅读过 redux 的源码，了解其原理。本文作为学习笔记，并根据 redux 的比较核心的 createStore 这部分代码实现一个简易版本的 redux，以便将来回顾。

redux demo

redux 提供了使用 demo 如下：

import { createStore } from 'redux'

/**
 * 这是个 reducer，纯函数，用于描述状态是如何转变的
 * reducer 接收 state 和 action 作为参数
 */
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

// createStore：接收 reducer 作为参数，以此构建一个 store
let store = createStore(counter)

// 订阅 store, 每次 dispatch 的时候，都将触发回调
store.subscribe(() => console.log(store.getState()))

// dispath 一个 action
store.dispatch({ type: 'INCREMENT' })

简化的数据流

以上的数据流简化了 combineReducers 等过程

简易 redux

可以看出 redux 实际上就是一个发布订阅模式，简易版实现如下

const createStore = (reducer) => {
  let state
  // 订阅的回调
  let listeners = []

  // 获取 state
  const getState = () => {
    return state
  }

  const dispatch = (action) => {
    // 更新 state
    state = reducer(state, action)
    // 一旦 dispatch 就执行所有订阅的回调
    listeners.forEach((listener) => listener())
  }

  const subscribe = (listener) => {
    // 收集回调
    listeners.push(listener)
    return () => {
      // 取消订阅
      listeners = listeners.filter((l) => l !== listener)
    }
  }

  return {
    getState,
    dispatch,
    subscribe,
  }
}