redux源码分析
动机
应用模块之间需要访问共享数据,采用redux管理数据状态。所有数据保存在store tree中,用于维护数据状态。
“Redux 是 JavaScript 状态容器,提供可预测化的状态管理。”
目录
三大原则
combineReducers
createStore
store方法
数据流
middlewares
实现redo&undo
三大原则
单一数据源
整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。
State 是只读的
惟一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。通过 store.dispatch() 将 action 传到 store。action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作
let action = {
type: 'CHANGE_TEXT',
text:'helloworld'
};
store.dispatch(action);
可以通过Action 创建函数 生成 action 。
function changeText(text) {
return {
type: 'CHANGE_TEXT',
text
}
}
store.dispatch(changeText('helloworld'));
使用纯函数来执行修改
通过reducer改变state tree,要求reducer是纯函数,即只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。
function todoApp(state = initialState, action) {
switch (action.type) {
case 'CHANGE_TEXT':
return Object.assign({}, state, {
text: action.text
})
default:
return state
}
}
注意:
1)不要修改 state。
2)在 default 情况下返回旧的 state。
combineReducers
开发一个函数来做为主 reducer,它调用多个子 reducer 分别处理 state 中的一部分数据,然后再把这些数据合成一个大的单一对象。每个 reducer 只负责管理全局 state 中它负责的一部分。每个 reducer 的 state 参数都不同,分别对应它管理的那部分 state 数据。
reducers.js
import { combineReducers } from 'redux'
const initialUser = {
name:"chen",
age:10
};
const initialJob = {
position:"engineer"
};
const userReducer = (state = initialUser, action) => {
let payload = action.payload;
let type = action.type;
switch (type) {
case "CHANGE_NAME":
state = Object.assign({},state,{ name : payload});
break;
case "ADD_AGE":
state = Object.assign({},state,{ age : state.age+1});
break;
default:
break;
}
return state;
};
const jobReducer = (state = initialJob, action) => {
let payload = action.payload;
let type = action.type;
switch (type) {
case "CHANGE_POSITION":
state = Object.assign({},state,{ position : payload});
break;
default:
break;
}
return state;
};
const reducers = combineReducers({
userReducer,
jobReducer
})
export default reducers
createStore
通过createStore生成store tree。createStore() 的第二个参数是可选的, 用于设置 state 初始状态
const store = createStore(
reducers
);
store方法
提供 getState() 方法获取 state;
提供 dispatch(action) 方法更新 state;
通过 subscribe(listener) 注册监听器;
通过 subscribe(listener) 返回的函数注销监听器。
数据流
严格的单向数据流
数据流动方向
问题:无法进行异步或辅助操作。
middlewares
提供了位于 action 被发起之后,到达 reducer 之前的扩展点。 可以用来进行日志记录、创建崩溃报告、调用异步接口或者路由。
以下是3个不同功能的中间件,通过输出数组的方式将3个中间件输出模块
middleware 机制
redux 提供了 applyMiddleware 这个 api 来加载 middleware
applyMiddleware.js源码
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
const store = createStore(reducer, preloadedState, enhancer)
let dispatch = store.dispatch
let chain = []
const middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
middlewares
const m1 = store => next => action => {
let startState = store.getState();
console.log("m1 start");
console.log(startState.user.age);
next(action);
let endState = store.getState();
console.log("m1 end");
console.log(endState.user.age);
};
const m2 = store => next => action => {
let startState = store.getState();
console.log("m2 start");
console.log(startState.user.age);
next(action);
let endState = store.getState();
console.log("m2 end");
console.log(endState.user.age);
};
const m3 = store => next => action => {
let startState = store.getState();
console.log("m3 start");
console.log(startState.user.age);
next(action);
let endState = store.getState();
console.log("m3 end");
console.log(endState.user.age);
};
const middlewares = [m1, m2, m3];
export default middlewares
index.js
import { createStore, applyMiddleware } from 'redux';
import reducers from './reducers';
import middlewares from './middlewares';
import reducers from './reducers';
import middlewares from './middlewares';
const defaultState = {};
const store = applyMiddleware(...middlewares)(createStore)(reducers, defaultState);
window.store = store;
applyMiddleware 是一个多层柯里化(curry)的函数
通过applyMiddleware(...middlewares)可以将[m1,m2,m3]3个中间件串联起来,下面分析以下具体实现方式。
1)初始化store将dispatch指向store.dispatch
const store = createStore(reducer, preloadedState, enhancer)
let dispatch = store.dispatch
2)用middlewareAPI封装store方法,middlewareAPI.dispatch方法最终指向store.dispatch。
let chain = []
const middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
3)通过将middlewareAPI传入每个中间件[m1,m2,m3],返回chain,此时chain=[f1,f2,f3],且由于闭包,f1,f2,f3中的store都指向middlewareAPI ,最终指向store。这样的好处就是每个f都能访问到同一个store。
chain = middlewares.map(middleware => middleware(middlewareAPI))
4)通过compose函数将[f1,f2,f3] 串联执行,最后dispatch被改写成了如下函数。
dispatch = f1(f2(f3(store.dispatch)));
/*
dispatch = (action)=>{
console.log("m1 start");
((action) =>{
console.log("m2 start");
((action) => {
console.log("m3 start");
store.dispatch(action)
console.log("m3 end");
})(action);
console.log("m2 end");
})(action);
console.log("m1 end");
}
*/
可以看到,此时f1’,f2’,f3’ 中的next指向中,只有最后一个f3’是指向store.dispatch,其余next指向前一个f'的输出。f1’,f2’,f3’所有store都指向middlewareAPI,最终getState和dispatch还是指向store。通过这样的方式可以将中间件串联起来。
例子
执行一次dispatch
store.dispatch({type:"ADD_AGE"})
输出结果如下:
注意
中间件的串联并不是简单依次执行,而是从middlewares数组的右边开始,依次将后一个中间件输出当成的函数(一个接收action的函数)作为前一个的next。
总结
最后,经过采用middleware,我们加入middleware来实现“非纯操作”,如请求异步接口,进队列,出队列,处理数据等。
加入middleware后的数据流
参考文献
https://zhuanlan.zhihu.com/p/...
https://github.com/reactjs/redux
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。