1. 概述
本文带着大家回顾下redux用法，redux的API，createStore、reducer、dispatch等，了解用法后，一起探索原理，难点是redux中间件的原理局部。
留神：本文只探索redux，不关注react-redux，react-redux的应用和原理前面会有专文解说，redux的用途不限于react，任何你想要订阅事件的中央，都能够独自应用redux。
2. 设计思维
redux是将整个利用状态存储到到一个中央，称为store，繁多数据源- 外面保留一棵状态树
state - 派发
dispatch行为action给store，而不是间接更改state，只读 -
用户通过订阅(
subscribe) store，当有dispatch行为时，会告诉订阅者更新下图是我画的
redux流程，其实从图中看redux逻辑也简略，你只能用dispatch通过派发action更新state，action派发后，外部有两个事件解决，一是要调用reducer更新state，二是触发之前订阅过的事件执行，就完了。
3. redux根本应用
本文重点讲原理，适宜有redux根底的同学，用法简略回顾。
3.1 createStore
用来创立store
import { createStore } from 'redux';
const defaultState = 0;
const reducer = (state = defaultState, action) => {
switch (action.type) {
case 'ADD':
return state + action.payload;
default:
return state;
}
};
const store = createStore(reducer);3.2 getState
获取以后state数据
const state = store.getState();3.3 action
action 是一个对象。其中的type属性是必须的，示意 action 的名称。其余属性能够自在设置。
const action = {
type: 'ADD_TODO',
payload: 'Learn Redux'
};3.3 dispatch
派发action的惟一路径
import { createStore } from 'redux';
const store = createStore(fn);
store.dispatch({
type: 'ADD_TODO',
payload: 'Learn Redux'
});3.4 reducer
承受旧的state和action作为参数，返回新的state
const defaultState = 0;
const reducer = (state = defaultState, action) => {
switch (action.type) {
case 'ADD':
return state + action.payload;
default:
return state;
}
};3.5 subscribe
设置订阅，dispatch时会主动执行所有订阅的事件
import { createStore } from 'redux';
const store = createStore(reducer);
let unsubscribe = store.subscribe(() => {
console.log("state更新了")
});
// subscribe的返回值能够勾销订阅
// unsubscribe();3.6 combineReducers
把多个reducer合并成一个，因为在理论我的项目中，不同的业务数据不可能全副写在一个reducer里，保护老本高，通常把reducer按业务离开，最初用combineReducers合并后，再传给createStore
import { combineReducers } from 'redux';
const reducer = combineReducers({
chatLog,
statusMessage,
userName
})
export default reducer;4. 原理
我看的redux版本是4.1.2的源码
4.1 createStore源码剖析
/**
* 创立store
* @param {*} reducer
* @param {*} preloadedState
* @param {*} enhancer
* @returns
*/
unction createStore(reducer, preloadedState, enhancer) {
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
enhancer = preloadedState;
preloadedState = undefined;
}
if (typeof enhancer !== 'undefined') {
if (typeof enhancer !== 'function') {
throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(1) : "Expected the enhancer to be a function. Instead, received: '" + kindOf(enhancer) + "'");
}
return enhancer(createStore)(reducer, preloadedState);
}
// 上局部redux中间件再讲，咱们先只关注createStore第一个参数reducer
// reducer必须是个函数
if (typeof reducer !== 'function') {
throw new Error("Expected the root reducer to be a function.");
}
// 定义外部变量
var currentReducer = reducer;
// 以后state数据，初始值是preloadedState
var currentState = preloadedState;
// 保留所有订阅函数
var currentListeners = [];
// 保留的订阅函数快照
var nextListeners = currentListeners;
// 是否dispatch正在执行
var isDispatching = false;
// 为subscribe执行时，提供备份，具体在subscribe函数细看
function ensureCanMutateNextListeners() {
if (nextListeners === currentListeners) {
nextListeners = currentListeners.slice();
}
}
/**
* getState源码，获取以后最新state
* @returns 返回state
*/
function getState() {
return currentState;
}
/**
* subscribe源码，用来收集订阅
* @param {*} listener 订阅办法
* @returns 返回勾销此订阅的办法
*/
function subscribe(listener) {
// listener 必须是函数
if (typeof listener !== 'function') {
throw new Error("Expected the listener to be a function");
}
// 闭包变量，用来标识勾销订阅办法只能执行一次
var isSubscribed = true;
// 为每次订阅提供快照备份nextListeners，
// 避免在dispatch里遍历currentListeners过程中，触发了订阅/勾销订阅性能。
// 若间接更新currentListeners将造成以后循环体逻辑凌乱，
// 因而所有订阅/勾销订阅的listeners都是在nextListeners中存储的，并不会影响以后的dispatch(action)
ensureCanMutateNextListeners();
nextListeners.push(listener);
return function unsubscribe() {
// 曾经勾销了，间接跳出
if (!isSubscribed) {
return;
}
// 勾销胜利，没有此订阅了
isSubscribed = false;
ensureCanMutateNextListeners();
var index = nextListeners.indexOf(listener);
nextListeners.splice(index, 1);
currentListeners = null;
};
}
/**
* dispatch源码
* @param {*} action 承受action对象
* @returns 返回action
*/
function dispatch(action) {
// action是个纯对象
if (!isPlainObject(action)) {
throw new Error("Actions must be plain objects.");
}
// action对象必须有type属性
if (typeof action.type === 'undefined') {
throw new Error('Actions may not have an undefined "type" property. You may have misspelled an action type string constant.');
}
// 执行reducer时，不容许有其余dispatch操作
if (isDispatching) {
throw new Error('Reducers may not dispatch actions.');
}
try {
// 开始执行reducer
isDispatching = true;
// reducer承受以后state和action对象，返回新的state
currentState = currentReducer(currentState, action);
} finally {
// reducer执行实现，state更新结束
isDispatching = false;
}
// 而后再执行所有subscribe订阅过的listeners
var listeners = currentListeners = nextListeners;
// 遍历执行
for (var i = 0; i < listeners.length; i++) {
var listener = listeners[i];
listener();
}
// 返回action
return action;
}
// 首先派发初始化action，目标是给state赋初始值
// 因为reducer函数，在初始化时，能够传个state初始值，所以在外部调用下，reducer的action没有匹配时，返回默认值
// 留神：如果createStore传了第二个参数是个对象，也代表初始state，见代码：var currentState = preloadedState;
// 此时会笼罩reducer的默认值，因为在调用currentReducer(currentState, action)形式传的currentState就是preloadedState，所以reducer函数的默认值有效了
dispatch({
type: ActionTypes.INIT
});
return {
dispatch: dispatch,
subscribe: subscribe,
getState: getState
}
}4.2 combineReducers源码解析
对照
combineReducers应用办法，再看原理
import { combineReducers } from 'redux';
function chatLog(state, action) {
switch (action.type) {
case 'ADD':
return state + action.payload;
default:
return state;
}
}
function statusMessage(state, action) {
// 同chatLog
}
function userName(state, action) {
// 同chatLog
}
const reducer = combineReducers({
chatLog,
statusMessage,
userName
})
const store = createStore(reducer);原理
function combineReducers(reducers) {
var reducerKeys = Object.keys(reducers);
var finalReducers = {};
for (var i = 0; i < reducerKeys.length; i++) {
var key = reducerKeys[i];
if (typeof reducers[key] === 'function') {
finalReducers[key] = reducers[key];
}
}
var finalReducerKeys = Object.keys(finalReducers); // This is used to make sure we don't warn about the same
// 返回还是reducer函数的类型
// dispatch理论执行的reducer
return function combination(state, action) {
// state没有默认值时，初始化一个对象
if (state === void 0) {
state = {};
}
// 标识state中每个key的值更新前后是否有变动
var hasChanged = false;
// 更新之后的state
var nextState = {};
// 遍历每个小的reducer
for (var _i = 0; _i < finalReducerKeys.length; _i++) {
// combineReducers参数对象的key
var _key = finalReducerKeys[_i];
// key对应的reducer
var reducer = finalReducers[_key];
// 通过 combineReducers参数对象的key 取出之前的状态
var previousStateForKey = state[_key];
// 每个reducer都会调用
var nextStateForKey = reducer(previousStateForKey, action);
// 保留每个key的返回的新的state
nextState[_key] = nextStateForKey;
hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
}
hasChanged = hasChanged || finalReducerKeys.length !== Object.keys(state).length;
// 有变动返回新的state，没变动返回旧的state
return hasChanged ? nextState : state;
};
}总结下
combineReducers的返回值还是个reducer模式的函数- 因为
createStore办法内，会初始执行一次dispatch，所以源码中combination(组合后的reducer)会首先调用一次，返回与combineReducers参数对象一样构造的state，即state的构造同combineReducers参数对象，对象的属性值是每个reducer对应的返回值 -
有
dispatch派发时，所有的reducer都会执行一次，reducer接管的是state对应key的value，不是整个state状态数据5. 结尾
到这redux原理就完了，其实发现redux源码简略，外围就是
createStore办法。
一句话形容redux原理：通过subscribe订阅更新，dispatch扭转state时遍历执行所有的订阅事件。
redux两头前面会写个专文来解说，本篇文章内容不少了，不放在本篇了，先了解好redux原理。
完
如有谬误，请斧正，欢送评论交换，关注我，只写干货
发表回复