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

存储状态 state

获取状态 getState

更新状态 dispatch

变更订阅 subscribe

 

自定义redux中间件： kRedux.js
 

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

 

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

asyAdd = () => {
 store.dispatch(dispatch => {
     setTimeout(() => {
         dispatch({type: "ADD"});
     }, 1000);
 });
};

中间件实现：

 

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

 

// 把下⾯加⼊ kRedux.js

 

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 原理

 

打日志：

 

function logger() {
 return dispatch => action => {
     // 中间件任务
     console.log(action.type + "执⾏了！");
     return dispatch(action);
 };
}
const store = createStore(counterReducer,applyMiddleware(logger));

redux-thunk 原理

 

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

 

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));

原文：视频讲解笔记