redux扩展，自定义redux以及中间件实现思路


存储状态
state

获取状态
getState

更新状态
dispatch

变更订阅
subscribe

自定义redux中间件：
kRedux.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export function createStore(reducer, enhancer){
     if (enhancer) {
         return enhancer(createStore)(reducer)
     }
     // 保存状态
     let currentState = undefined;
     // 回调函数
     let currentListeners = [];
     function getState(){
         return currentState
     }
     function subscribe(listener){
         currentListeners.push(listener)
     }
     function dispatch(action){
         currentState = reducer(currentState,action)
         currentListeners.forEach(v=>v())
         return action
     }
     dispatch({type:'@@OOO/KKB-REDUX'})
   return {
     getState,
     subscribe,
     dispatch
   }
}

异步：

Redux
只是个纯粹的状态管理器，默认只?持同步，实现异 步任务 ?如延迟，?络请求，需要中间件的?持，?如我们 试?最简单的redux-thunk
和
redux-logger
。 中间件就是?个函数，对store.dispatch
?法进?改造， 在发出 Action
和执?
Reducer
这两步之间，添加了其他功 能。

npm
install redux-thunk redux-logger
--save

应?中间件，
store.js

1
2
3
4
5
import { createStore, applyMiddleware } from "redux";
import logger from "redux-logger";
import thunk from "redux-thunk";
import counterReducer from './counterReducer'
const store = createStore(counterReducer,applyMiddleware(logger, thunk));

使?异步操作时的变化，
ReactReduxPage.js

1
2
3
4
5
6
7
asyAdd = () => {
 store.dispatch(dispatch => {
     setTimeout(() => {
         dispatch({type: "ADD"});
     }, 1000);
 });
};

中间件实现：

核?任务是实现函数序列执?。

//
把下?加?
kRedux.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
export function applyMiddleware(...middlewares) {
 // 返回强化以后函数
 return createStore => (...args) => {
     const store = createStore(...args)
     let dispatch = store.dispatch
     const midApi = {
         getState:store.getState,
         dispatch:(...args)=>dispatch(...args)
     }
     // 使中间件可以获取状态值、派发action
     const middlewareChain = middlewares.map(middleware => middleware(midApi))
     // compose可以middlewareChain函数数组合并成?个函数
     dispatch = compose(...middlewareChain) (store.dispatch)
     return {
         ...store,
         dispatch
     }
 }
}
export 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)))
}

redux-logger
原理

打日志：

1
2
3
4
5
6
7
8
function logger() {
 return dispatch => action => {
     // 中间件任务
     console.log(action.type + "执?了！");
     return dispatch(action);
 };
}
const store = createStore(counterReducer,applyMiddleware(logger));

redux-thunk
原理

thunk
增加了处理函数型
action
的能?

1
2
3
4
5
6
7
8
9
10
function thunk({ getState }) {
 return dispatch => action => {
     if (typeof action === "function") {
         return action(dispatch, getState);
     } else {
         return dispatch(action);
     }
 };
}
const store = createStore(counterReducer,applyMiddleware(thunk,logger));

原文：视频讲解笔记