前言吐槽
Redux 应该是很多前端新手的噩梦。还记得我刚接触 Redux 的时候也是刚从 Vue 转过来的时候，觉得Redux 概念非常多，想写一个 Hello World 都难。
文档也是很难看懂，并不是看不懂英文，而是看的时候总会想：TMD在说泥🐴呢。看得出文档想手把手把新手教好，结果却是适得而反，啰嗦的排版和系统性地阐述让新手越来越蒙逼。文档还有一步令人窒息的操作：把 redux、react-redux、redux-toolkit 三个库放在一起来讲。靠，你的标题叫 redux 文档啊，就讲 Redux 不就行了嘛？搞得新手总会觉得 Redux 就是像 Vuex 一样为 React 量身订做的，其实并不是。
Redux 和 React 的关系
Redux 和 React 根本没关系。
看 Redux 的官网开头："A Predictable State Container for JS Apps"。再看 Vuex 的官网开头："Vuex is a state management pattern + library for Vue.js applications"。
请问哪里出现了 "react" 这个单词了？
两者的定位本来就不一样：Redux 仅仅是个事件中心（事件总线，随便怎么叫），就是 for JS Apps 的。而 Vuex 除了事件中心，也是 for Vue.js applications 的。
解决了什么问题
为了重新认识 Redux，我们先搞清楚 Redux 到底是个啥、解决了什么问题。
简单来说：
- 创建一个事件中心，里面存一些数据，叫
store - 向外提供读、写操作，叫
getState和dispatch，通过分发事件修改数据，叫dispatch(action) - 添加监听器，每次 dispatch 数据改了，就触发监听器，达到监听数据变化的效果，叫
subscribe
Redux 本来就是一个超级简单的库，只是文档不知不觉把它写复杂了，搞得新手无从下手，口口相传觉得 Redux 很难、很复杂。其实 Redux 一点都不难、简单得一批。
不信？下面就带大家一起写一个完整的 Redux。
createStore
这个函数创建一个 Object，里面存放数据，并提供读和写方法。实现如下：
function createStore(reduce, preloadedState, enhancer) { let currentState = preloadedState // 当前数据（状态） let currentReducer = reducer // 计算新数据（状态） let isDispatching = false // 是否在 dispatch // 获取 state function getState() { if (isDispatching) { throw new Error('还在 dispatching 呢，获取不了 state 啊') } return currentState } // 分发 action 的函数 function dispatch(action) { if (isDispatching) { throw new Error('还在 dispatching 呢，dispatch 不了啊') } try { isDispatching = true currentState = currentReducer(currentState, action) } finally { isDispatching = false } return action } return { getState, dispatch } } 复制代码
上面将数据存于 currentState。getState 返回当前数据。在 dispatch 里使用 reducer 计算新的数据（状态）从而修改 currentState。
上面还用 isDispatching 防止多重 dispatch 情况下操作同一资源的问题。
假如别人不给你传 preloadedState，那 currentState 初始时就会为 undefuned 了呀，undefined 作为 state 是不行的。为了解决这个问题，可以在 createStore 的时候直接 dispatch 一个 action，这个 action 不命中所有 reducer 里的 case，那么 reducer 都返回初始值，以此达到初始化 state 的目的，这也是为什么在 reducer 里的 switch-case 的 default 一定要返回 state 而不是啥都不处理。
// 生成随机字符串，注意这里的 toString(36) 的 36 是基数 const randomString = () => Math.random().toString(36).substring(7).split('').join('.') const actionTypes = { INIT: `@@redux/INIT${randomString()}`, // 为了重名，追加随机字符串 } function createStore(reduce, preloadedState, enhancer) { ... // 获取 state function getState() { ... } // 分发 action 的函数 function dispatch(action) { ... } // 初始化 dispatch({type: actionTypes.INIT}) return { getState, dispatch } } 复制代码
然后就可以用我们的 Redux 啦~
const reducer = (state, action) => { switch (action.type) { case 'increment': return state + action.payload case 'decrement': return state - action.payload default: return state } } const store = createStore(reducer, 1) // 1，不管有没有初始值，都会 dispatch @@redux/INIT 来初始化 state store.dispatch({ type: 'increment', payload: 2 }) // 1 + 2 console.log(store.getState()) // 3 复制代码
isPlainObject 和 kindOf
Redux 对 action 是有要求的，一定要是普通对象。所以我们还要需要判断一下，如果不是普通对象，就抛出错误并说明 action 此时的类型。
// 分发 action 的函数 function dispatch(action: A) { if (!isPlainObject(action)) { // 是不是纯对象 throw new Error(`不是纯净的 Object，是一个类似 ${kindOf(action)} 的东西`) // 不是，是一个类似 XXX 的东西 } ... } 复制代码
这里的 isPlainObject 和 kindOf 都是可以从 npm 里的 is-plain-object 和 kind-of 获得。这两个包实现都很简单。是不是会觉得：啊？就这？就这么小的包都有几万的下载量？？？我自己实现也行啊。没错，前端开发就是这么无聊，写这么小的包都能一炮而红，只难当年还不会 JS 没能夺得先机 😢。
这里我们用 npm 包，自己实现一波吧：
首先是 isPlainObject，一般来说通过判断 typeof obj === 'object' 就可以了，但是 typeof null 也是 object，这是因为最初实现 JS 的时候，用 type 和 value 表示 JS 的值，当 type === 0 时表示是 Object，而当初 null 的地址又为 0x00 所以 null 的 type 一直是 0，因此 typeof null === null，可以 参考这里。 另一个点是原型键只有一层。
const isPlainObject = (obj: any) => { // 检查类型 if (typeof obj !== 'object' || obj === null) return false // 检查是否由 constructor 生成 let proto = obj while (Object.getPrototypeOf(proto) !== null) { proto = Object.getPrototypeOf(proto) } return Object.getPrototypeOf(obj) === proto } export default isPlainObject 复制代码
另一个函数 kindOf 实现就繁琐多了，除了要判断一些简单的 typeof 值，还要判断 Array, Date, Error 等多种对象。
const isDate = (value: any) => { // 是不是 Date if (value instanceof Date) return true return ( typeof value.toDateString === 'function' && typeof value.getDate === 'function' && typeof value.setDate === 'function' ) } const isError = (value: any) => { // 是不是 Error if (value instanceof Error) return true return ( typeof value.message === 'string' && value.constructor && typeof value.constructor.stackTraceLimit === 'number' ) } const getCtorName = (value: any): string | null => { // 获取 return typeof value.constructor === 'function' ? value.constructor.name : null } const kindOf = (value: any): string => { if (value === void 0) return 'undefined' if (value === null) return 'null' const type = typeof value switch (type) { // 有字面意思的值 case 'boolean': case 'string': case 'number': case 'symbol': case 'function': return type } if (Array.isArray(value)) return 'array' //是不是数组 if (isDate(value)) return 'date' // 是不是 Date if (isError(value)) return 'error' // 是不是 Error const ctorName = getCtorName(value) switch (ctorName) { // 构造函数中读取类型 case 'Symbol': case 'Promise': case 'WeakMap': case 'WeakSet': case 'Map': case 'Set': return ctorName } return type } 复制代码
上面两个函数在学习 Redux 并不是很重要，不过可以我们提供实现这两个工具函数的一些灵感，下次再次使用时我们也可以直接手写出来。
replaceReducer
replaceReducer 这个函数别说用了，估计没多少人听说过。在 Code Spliting 的时候才会用到。比如打包出来有 2 个 JS，第一个先加载了 reducer，第二个加载新的 reducer，这里可以用 combineReducers 去完成合并。
const newRootReducer = combineReducers({ existingSlice: existingSliceReducer, newSlice: newSliceReducer }) store.replaceReducer(newRootReducer) 复制代码
现在有太多做动态模块、代码分割的库帮我们做了这些事情了，所以我们没多大机会用到这个 API。
实现上也很简单，就是把原来的 reducer 替换掉就可以了。
const actionTypes = { INIT: `@@redux/INIT${randomString()}`, REPLACE: `@@redux/REPLACE${randomString()}` } function createStore(reducer, preloadedState, enhancer) { ... function replaceReducer(nextReducer) { currentReducer = nextReducer dispatch({type: actionTypes.REPLACE} as A) // 重新初始化状态 return store } ... } 复制代码
上面除了直接替换，还 dispatch 了 @@redux/REPALCE 这个 action。把当前状态都重置了。
