最近看redux原理，发现没有想象中的难以理解，在这里进行总结交流一下，为便于理解，以下源码做了部分简化。
具体代码与详细介绍参见：https://github.com/dishui1238/react-redux-demo
1. 前言
首先，思考下以下函数如果想要顺序输出 1，2，3，应该如何处理？
function f1() {
console.log("1");
}
function f2() {
console.log("2");
}
function f3() {
console.log("3");
}
方法一： f1();f2();f3();
方法二：f3(f2(f1()))
对于方法二可以写一个通用函数，可以称作聚合函数，这样就保证了函数的顺序执行。
function compose(...funcs) {
const len = funcs.length;
if (len === 0) {
return (arg) => arg;
}
if (len === 1) {
return funcs[0];
}
return funcs.reduce((left, right) => (...args) => right(left(...args)));
}
compose(f1, f2, f3)();
这个函数在 redux 中的 applyMiddleware实现时会用到，可以保证中间件的顺序执行。
2. 分析Redux
这部分需要对 Redux 有一定了解，如果你没使用过 Redux ，请先查阅相关文章。
Redux 是 JavaScript 的应用状态容器，它需要以下几个功能：
- 需要一个数据源—— store 来存储数据
- 需要reducer 初始化 state 并定义 state 修改规则
- 如果想要对数据进行修改，需要一个 dispatch 发起 action
- action 提交到 reducer 函数里，根据传⼊的 action 的 type，返回新的 state
- Redux 只是个纯粹的状态管理器，默认只支持同步，如果要处理异步，需要使用中间件
3. createStore 的实现
在使用 createStore 后，可以从返回值中获取
getState()，dispatch()，subscribe()方法，即该函数返回 getState、dispatch、subscribe函数，接收reducer，applyMiddleware() 的返回值 作为参数。
/**
需要实现以下功能：
1. 存储状态 state
2. 获取状态 getState
3. 更新状态 dispatch
4. 变更订阅 subscribe: 通过 subscribe 在 store 上添加一个监听函数。每当调用 dispatch 方法时，会执行所有的监听函数
5. 应用中间件，即 applyMiddleware()
*/
export function createStore(reducer, enhancer) {
let state = undefined;
let listeners = [];
// enhancer（可以叫做强化器）是一个函数，这个函数接受一个「普通 createStore 函数」作为参数，返回一个「加强后的 createStore 函数」。这个加强的过程中做的事情，其实就是改造dispatch，添加上中间件。
// redux 提供的 applyMiddleware() 方法返回的就是一个 enhancer。
if (enhancer) {
// 返回加强后的 createStore 函数
return enhancer(createStore)(reducer);
}
function getState() {
return state;
}
function dispatch(action) {
state = reducer(state, action);
listeners.forEach((func) => func());
}
function subscribe(listener) {
listeners.push(listener);
}
// dispatch一个用于初始化的 action，相当于调用一次 reducer
dispatch({
type: "@MYREDUX/SOURCECODE",
});
return {
getState,
dispatch,
subscribe,
};
}
4. applyMiddleware 的实现
applyMiddleware 是用来改造 store 自带的 dispatch 方法。action 发生后，先给中间件处理，最后再dispatch一个action交给reducer去改变状态
export function applyMiddleware(...middlewares) {
// applyMiddleware 调用时，返回一个函数 A。
// 这个函数 A 接受一个函数形式的参数 createStore，返回函数 B。
// 函数 B 可以调用 createStore 函数，生成 store 并且返回。
return (createStore) => (...args) => {
const store = createStore(...args);
let dispatch = store.dispatch;
const middlewareAPI = {
getState: store.getState,
dispatch: (...args) => dispatch(...args),
};
// chain = [logger({getState, dispatch}), thunk({getState, dispatch})]
const chain = middlewares.map((middleware) => middleware(middlewareAPI));
// dispatch = thunk({getState, dispatch})(logger({getState, dispatch})])(dispatch)
dispatch = compose(...chain)(store.dispatch);
return { ...store, dispatch };
};
}
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)));
}
applyMiddleware 是一个层层包裹的匿名函数，也叫函数柯里化，可以层层调用，逐渐求值，有需要的小伙伴可以做进一步了解，这里不做介绍。
5. thunk 中间件实现
function thunk({ dispatch, getState }) {
return (dispatch) => (action) => {
if (typeof action === "function") {
// 处理异步请求
return action(diapatch, getState);
}
return dispatch(action);
};
}
可以推断出适用于 thunk 的 action 是什么形式，比如：
asyncAdd = () => {
store.dispatch((dispatch) => {
setTimeout(() => {
store.dispatch({ type: "add" });
}, 1000);
});
};
6. 总结
redux 原理好像并不难理解，但是其中的函数处理方式确实短小精悍，着实惊人，希望通过不断的学习，自己也能写出如此优秀的代码。
