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

分手后的思念是犯贱 2022-12-12 00:32 234阅读 0赞

存储状态 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 的能⼒

原文：视频讲解笔记