咦？你还不懂Redux么？本文带你从源码角度深入Redux，redux-thunk

站长

2023年09月05日 19:53 · 阅读数 46

通读这篇文章你可以收获到：

对于状态管理库的深层理解
Redux实现原理
Redux为什么这样设计

Redux做了什么？

我们知道的是Redux是一个状态管理库，我们思考一下，一个状态管理库都需要什么？

状态管理库：

单一数据源 Redux通过在CreateStore里面的声明的currentState用于存储和管理所有state
可预测的状态变化
中间件支持 Redux的中间件支持是通过applyMiddleware方法实现的，在createStore中对于增强函数的参数也做了处理
可组合性状态管理库应该支持组合多个函数来管理不同部分的状态，在Redux中，通过CombineReducers函数来实现对多个Reducer的集中处理
状态同步

状态管理库应该提供一种机制来确保状态在应用程序的不同部分之间保持同步，Redux通过isDispatching属性在进行dispatch调用时，不允许进行下一个dispatch调用，不允许进行订阅操作。
订阅机制

Redux中使用subscribe方法实现监听器，当dispatch调用，会执行注册的监听函数。缺陷：这个调用是全局的，针对整个状态树，无法针对个别进行单独监听。

概述：

关于Redux中常用的方法(提供的Api)：

createStore：用于创建一个应用程序中存储和管理状态的对象，该方法内部封装了dispatch、getState等方法
combineReducers：用于合并多个reducer，本质是合并多个reducer为一个reducer，并把state整合到store中
applyMiddleware：

用于添加中间件和增强函数，比如我们若要去支持异步，那么我们使用redux-thunk中的ThunkMiddleware，传入createStore作为第二个或第三个参数（稍后会讲解为什么第二个或者第三个参数都可以，是源码对此做了处理）

需要手动写的：

初始化state：声明一个state 作为一个 Reducer 的状态传入 Reducer action方法: 用于表示应用程序中发生的事件或用户的操作，并作为参数传递给 Redux 的 Reducer 函数，从而触发状态的更新。
Reducer ：用于关联state和action方法，实现状态的改变。
action: action方法返回{type:xxx,payload:xxx}

写法：

声明store/index.js

import { legacy_createStore as createStore,combineReducers,applyMiddleware} from 'redux'
import ThunkMiddleware from 'redux-thunk'
import axios from 'axios'

const initialState = {
    str :'one'
}

const reducer =  (state = initialState , { type, payload }) => {
  switch (type) {

  case 'one':{
    console.log('first')
    return {...state, count: state.count + payload}  //数据不可变性  
  }
  default:
    return state
  }
}

export function one(){
  return {
      type:"first",
      payload:"two"
  }
}
function asyncFunc(){            //异步使用
     return (dispatch,getState)=>{  
         new Promise((res)=>{
             res(Math.random()*10)
         }).then(res=>{
             dispatch({type:"first",payload:res})
             console.log(getState(),'this is state')    
         })  
        
     }
 }


const rootReducers = combineReducers({
    num:reducer
})  

const store = createStore(rootReducers,applyMiddleware(ThunkMiddleware))

export default store

使用：App.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import store,{one,asyncFunc} from "./store/index"

 
store.subscribe(()=>{
  console.log('state发生了变化')
})

function Home() {
  function handleClick(){
    store.dispatch(asyncFunc())
    // store.dispatch(one())   同步调用，更新state
  }
  return (
    <div>  
      <button onClick={()=>{handleClick()}}>click this change state</button>
      Home</div>
  )
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<Home></Home>}>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

Redux源码解析

接下来我们来说为什么可以这么写，redux到底做了什么？首先，我们从createStore说起，这样我们调用createStore先看一下反回了什么？咦？你还不懂Redux么？本文带你从源码角度深入Redux，redux-thunk

createStore：

创建变量

//代码取自源码 先了解 后边会叙述
var currentReducer = reducer;   // Reducer
var currentState = preloadedState; // state
var currentListeners = [];  // 监听函数集合（存放的是subscribe的参数）
var nextListeners = currentListeners; // 复制一个监听函数组集合
var isDispatching = false; // 是否正在调用dispatch，通过reducer调用改变当前状态

初始化

   dispatch({ //代码取自源码 先了解 后边会叙述
    type: ActionTypes.INIT
  });  我们写reducer会写一个default，把我们的默认值返回，这个其实就是初始化调用。

subscribe：

参数处理：
- 我们是传入一个监听方法，当dispatch调用改变state后这个方法会被调用，所以我们要对传入的方法存储起来，以便调用
调用时机：
- 它本身的话是调用完dispatch之后直接调用该方法。用于监听state状态的变化。（那么实现原理就是在dispatch方法中，在调用方法改变state状态之后调用所有的监听方法）

移除监听：

有了监听，那么肯定就有取消监听。我们知道监听的函数是被单独存储起来的，那么取消监听的实现也就是把这个函数从数组中移除。

subScribe源码做了什么？

对参数类型进行校验、判断是否正在进行dispatch
声明 isSubscribed 变量
复刻当前 currentListeners 到 nextListeners 中 ----》把listner（也就是当前参数）添加到数组中
返回取消订阅方法方法内部校验isSubscribed变量删除了当前listener从当前的 nextListeners ，并把 currentListener 置空

问题1：如果已经调用了dispatch，通过reducer方法改变当前状态，当正在执行的时候我如果取消订阅这时候会出现问题？

问题2：如果已经调用了dispatch，但是要添加新的订阅，如果新的订阅是要依赖于调用后的数据来对Dom进行操作怎么办？redux是怎么处理的？

 1. 为了解决这个问题，redux设置了标识 isDispatching ，我们可以在源码中看到相应的if逻辑判断
   `isDispatching` 是一个用于标识当前是否正在执行reducer的标志变量。它的作用是确保在reduce执
    行期间不会取消订阅监听器。
 2. 为了保证保持状态更新的顺序和一致性，只要是在调用dispatch时，不许进行订阅和取消订阅的操
    作，防止会出现意外

疑问1：源码中出现变量 isSubscribed，这个变量是做的什么？

 1. 我们可以观察到在返回的取消订阅方法中也有这个变量，并且会修改这个变量的值。这其实就是一个标
 识，标识是否当前listener已被移除，通过if判断，若移除就直接return 不会执行后续操作。

疑问2：在源码中出现了一个方法叫做ensureCanMutateNextListeners()，他有什么用？

 1. 其实是把 currentListeners 的内容赋值给 nextListeners ，redux为了避免直接对
 currentListeners 直接进行操作导致出现潜在的问题，所以引入了一个nextListner变量，对他进行修
 改，使得代码更加健壮。

疑问3：在取消订阅方法中最终把currentListener置空？

 1. 在redux中，对数据的操作一定是通过dispatch传入action，redux在dispatch方法中其实对
 currentListeners做了赋值操作 即 var listeners = currentListeners = nextListeners;
 这里就重新拿到了最新的 currentListeners
 2. 语义化操作，即当前删除操作已进行，当前监听器为null

  function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice();
    }
  }

源码如下：

  function subscribe(listener) {
    if (typeof listener !== 'function') {
      throw new Error("Expected the listener to be a function. Instead, received: '" + kindOf(listener) + "'");
    }

    if (isDispatching) {
      throw new Error('You may not call store.subscribe() while the reducer is executing. ' + 'If you would like to be notified after the store has been updated, subscribe from a ' + 'component and invoke store.getState() in the callback to access the latest state. ' + 'See https://redux.js.org/api/store#subscribelistener for more details.');
    }

    var isSubscribed = true;
    ensureCanMutateNextListeners();  //复刻当前currentListeners
    nextListeners.push(listener);   // 添加本个
    return function unsubscribe() {
      if (!isSubscribed) {
        return;
      }

      if (isDispatching) {
        throw new Error('You may not unsubscribe from a store listener while the reducer is executing. ' + 'See https://redux.js.org/api/store#subscribelistener for more details.');
      }

      isSubscribed = false;
      ensureCanMutateNextListeners();    //复刻当前currentListeners
      var index = nextListeners.indexOf(listener); //获取位置
      nextListeners.splice(index, 1);// 删除当前
      currentListeners = null;//为null
    };
  }

dispatch：

调用方式： store.dispatch({type:xxx,payload:xxx}(也可以使用函数调用返回值))。

在reducer中，我们会根据传入的不同type来进行不同的处理。其实本质就是通过reducer根据传入的参数，区别不同的状态实现对状态的修改

isDispatching：上文我们已经提到，我们若在进行dispatch/已经执行完dispatch的操作后，我们修改这个状态，并且在上一个dispatch执行完之后，不允许进行下一个dispatch。源码中使用if逻辑进行判断。

     function dispatch(action) {
        if (!isPlainObject(action)) {  // 判断是否是普通对象，这点后文会提到为什么
          throw new Error("Actions must be plain objects. Instead, the actual type was: '" + kindOf(action) + "'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. See https://redux.js.org/tutorials/fundamentals/part-4-store#middleware and https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware for examples.");
        }

        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.');
        }

        if (isDispatching) { // 若在执行dispatch 则不许执行其他的dispatch
          throw new Error('Reducers may not dispatch actions.');
        }

        try {
          isDispatching = true;
          currentState = currentReducer(currentState, action);//调用Reducer 获取currentState
        } finally {
          isDispatching = false;
        }

        var listeners = currentListeners = nextListeners;  // 赋值currentListener
        for (var i = 0; i < listeners.length; i++) { // 调用监听器
          var listener = listeners[i];
          listener();
        }

        return action;
      }

getState：这个其实就是获取State直接上源码

      function getState() {
        if (isDispatching) {
          throw new Error('You may not call store.getState() while the reducer is executing. ' + 'The reducer has already received the state as an argument. ' + 'Pass it down from the top reducer instead of reading it from the store.');
        }

        return currentState;
      }

这个时候我们已经了解大致流程了，我们再来看createStore做了什么

参数

  createStore接受三个参数，并对这三个参数做了处理。即使我们传入的顺序并不对，他也可以根据类型来做出处理

function createStore(reducer, preloadedState, enhancer) {
  var _ref2;

  if (typeof preloadedState === 'function' && typeof enhancer === 'function' || typeof enhancer === 'function' && typeof arguments[3] === 'function') {
    throw new Error('It looks like you are passing several store enhancers to ' + 'createStore(). This is not supported. Instead, compose them ' + 'together to a single function. See https://redux.js.org/tutorials/fundamentals/part-4-store#creating-a-store-with-enhancers for an example.');
  }

  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState;
    preloadedState = undefined;
  }// 若第二个参数是函数 第三个参数不存在，则把第二哥参数赋值为enhance

  if (typeof enhancer !== 'undefined') {// enhancer不为空
    if (typeof enhancer !== 'function') {//不为函数
      throw new Error("Expected the enhancer to be a function. Instead, received: '" + kindOf(enhancer) + "'");
    }
 // 为函数 返回，并以createStore为参数
    return enhancer(createStore)(reducer, preloadedState);// 使用enhancer  传入参数createStore 外层参数（reducer和state）
  }

applayMiddleware（使用增强函数对dispatch的调用过程做了封装处理）

我们为了支持异步通常会使用react-redux库中的ThunkMiddlewar 调用方式

const store = createStore(rootReducers,applyMiddleware(ThunkMiddleware)) 根据上述代码我们可以知道在进入createStore中经判断由enhancer方法后会返回 applayMiddleware(ThunkMiddleware)(createStore)(rootReducers,preloadedState),我们下面看下applayMiddleware方法

注意，该函数最终返回的也就是一个对dispatch做过处理的store

    方法首先获取参数，此时参数是增强函数，把增强函数存储在内部变量middlewares中
    方法返回函数，接受一个参数。按我们调用方法来看 传入的参数就是createStore方法
    该方法又返回一个函数，此时就能接受到reducer和state，并在内部进行调用createStore方法
    在返回的函数中，遍历并调用增强函数，传入参数middlewareAPI
    调用compose函数传入增强函数调用结果的数组集合，并在得到结果后再次传入store下的dispatch方法并调用，以得到的结果作为_dispatch
    把得到的_dispatch，store封装起来作为返回值，也就是新的store

问题1：为什么选择对dispatch进行封装

我们知道，改变state状态我们是要通过调用dispatch，在dispatch方法内部调用reducer。那么这么一个过程，若我们想要dispatch去支持异步操作，其实就是要对dispatch方法进行增强处理

问题2： compose做了什么？我这点我们放在applyMiddleware的源码后来讲解

function applyMiddleware() {
  for (var _len = arguments.length, middlewares = new Array(_len), _key = 0; _key < _len; _key++) {
    middlewares[_key] = arguments[_key];
  } //arguments 是传入的增强函数集合

  return function (createStore) {
    return function () {
      var store = createStore.apply(void 0, arguments);

      var _dispatch = function dispatch() {
        throw new Error('Dispatching while constructing your middleware is not allowed. ' + 'Other middleware would not be applied to this dispatch.');
      };

      var middlewareAPI = {
        getState: store.getState,
        dispatch: function dispatch() {
          return _dispatch.apply(void 0, arguments);
        }
      };
      var chain = middlewares.map(function (middleware) {  // 对于这些函数集合是直接以包裹的形式调用的 
        return middleware(middlewareAPI);
      });// 获取到的是 thunkMiddleware(middleWareApi)调用的返回值   这里传入的参数会作为action的前两个参数  稍后我们会讲解 thunkMiddleware 方法到底时怎么写的
      _dispatch = compose.apply(void 0, chain)(store.dispatch);// 调用并返回结果  store.dispatch()作为next参数传入
      return _objectSpread2(_objectSpread2({}, store), {}, {
        dispatch: _dispatch
      });
    };
  };
}

compose

当传入的参数大于1个时，会使用数组的reduce方法将函数转换成嵌套调用的形式

function compose() {
  for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {
    funcs[_key] = arguments[_key];
  }

  if (funcs.length === 0) {
    return function (arg) {
      return arg;
    };
  }

  if (funcs.length === 1) {
    return funcs[0];
  }

  return funcs.reduce(function (a, b) {  // reduce的运用
    return function () {
      return a(b.apply(void 0, arguments));
    };
  });
}

redux-thunk thunkMiddleware

这个大家需要先看下源码，看完之后我在给大家解析

这里先放下异步dispatch的写法，结合源码来看

>function asyncFunc(){            //异步使用
     return (dispatch,getState)=>{  
         new Promise((res)=>{
             res(Math.random()*10)
         }).then(res=>{
             dispatch({type:"first",payload:res})
             console.log(getState(),'this is state')    
         })  
        
     }
 }

(function (global, factory) {
 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 typeof define === 'function' && define.amd ? define(factory) :
 (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ReduxThunk = factory());
})(this, (function () { 'use strict';

 /** A function that accepts a potential "extra argument" value to be injected later,
  * and returns an instance of the thunk middleware that uses that value
  */
 function createThunkMiddleware(extraArgument) {
   // Standard Redux middleware definition pattern:
   // See: https://redux.js.org/tutorials/fundamentals/part-4-store#writing-custom-middleware
   var middleware = function middleware(_ref) { //_ref是我们在applyMiddleware传入的参数
     var dispatch = _ref.dispatch,
         getState = _ref.getState;
     return function (next) {// next是我们传入的store.dispatch方法
       return function (action) {// 这个是我们最终得到的新的dispatch方法
         // The thunk middleware looks for any functions that were passed to `store.dispatch`.
         // If this "action" is really a function, call it and return the result.
         if (typeof action === 'function') {//检测action是一个函数 进行调用并传入新的参数
           // Inject the store's `dispatch` and `getState` methods, as well as any "extra arg"
           return action(dispatch, getState, extraArgument);
         } // Otherwise, pass the action down the middleware chain as usual


         return next(action);  //若不是函数 直接返回
       };
     };
   };

   return middleware;
 }

 var thunk = createThunkMiddleware(); // Attach the factory function so users can create a customized version
 // with whatever "extra arg" they want to inject into their thunks

 thunk.withExtraArgument = createThunkMiddleware;

 return thunk;   //这就是我们引入的ThunkMiddleware方法

}));

返回值是thunk 也就是我们拿到的thunkMiddleware

这个值在经过调用后被compose处理后得到的是新的dispatch，所以我们会传入老的dispatch作为参数 compose.apply(void 0, chain)(store.dispatch);// 调用并返回结果

我们的chain 得到的是一个数组，以我们之前的写法为例，我们只传入了一个增强函数就是thunkMiddleware，返回一个需要传参next的函数，该函数又返回了一个需要传action的函数，最后这个函数返回next(action) 到这里大家就应该明白了这时候的next 其实就是传入dispatch，所以新的dispatch函数就是：如下

 function (action) {
          // The thunk middleware looks for any functions that were passed to `store.dispatch`.
          // If this "action" is really a function, call it and return the result.
          if (typeof action === 'function') {
            // Inject the store's `dispatch` and `getState` methods, as well as any "extra arg"
            return action(dispatch, getState, extraArgument);
            console.log('thunk is action')
          } // Otherwise, pass the action down the middleware chain as usual


          return next(action);
        };

如果action是函数的话就会返回actoin（dispatch,getState）我们也就能在里面写异步方法并调用dispatch了

最后我们说下combineReducer
```
  本身用于合并Reducer，它会返回一个函数，这个函数可以作为新的reducer放在creatState的第一个参数里面。返回函数的返回值就是state（全局）
```
还记得dispatch方法中的调用Reducer么代码如下

currentState = currentReducer(currentState, action);这里combineReducer就是CurrentReducer 最终拿到的就是combinReducer的调用得到的返回值state

Reducer合并其实就是用一个数组接收多个Reducer，Reducer的调用其实是遍历多个不同的Reducer，整体遍历一遍，会得到每个Reducer的state，那么针对拥有相应action的Reducer，就会修改当前的State，源码中声明了一个nextState，对nextState进行操作。比较nextState和state相应的key值（这里的state[key]对应的就是相应reducer的state）是否相等，若不相等，声明变量为false，最终返回nextState这个更新后的state作为CurrentState

源码如下

function combineReducers(reducers) {
  var reducerKeys = Object.keys(reducers);// 获取keys
  var finalReducers = {};// 声明对象作为最终的Reducers

  for (var i = 0; i < reducerKeys.length; i++) {// 遍历
    var key = reducerKeys[i];

    {
      if (typeof reducers[key] === 'undefined') {
        warning("No reducer provided for key \"" + key + "\"");
      }
    }

    if (typeof reducers[key] === 'function') {  //key是函数  把该函数放的定义的finalReducers中
      finalReducers[key] = reducers[key];
    }
  }

  var finalReducerKeys = Object.keys(finalReducers); // This is used to make sure we don't warn about the same
  // keys multiple times.

  var unexpectedKeyCache;

  {
    unexpectedKeyCache = {};
  }

  var shapeAssertionError;

  try {
    assertReducerShape(finalReducers);
  } catch (e) {
    shapeAssertionError = e;
  }

  return function combination(state, action) {
    if (state === void 0) {
      state = {};  //声明state
    }

    if (shapeAssertionError) {
      throw shapeAssertionError;
    }

    {
      var warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action, unexpectedKeyCache);

      if (warningMessage) {
        warning(warningMessage);
      }
    }

    var hasChanged = false;
    var nextState = {};

    for (var _i = 0; _i < finalReducerKeys.length; _i++) {   //遍历
      var _key = finalReducerKeys[_i];
      var reducer = finalReducers[_key];
      var previousStateForKey = state[_key];  // state（总的）  这个给state赋值key的操作 就是拿到当前key对应的state
      var nextStateForKey = reducer(previousStateForKey, action); // 调用

      if (typeof nextStateForKey === 'undefined') {
        var actionType = action && action.type;
        throw new Error("When called with an action of type " + (actionType ? "\"" + String(actionType) + "\"" : '(unknown type)') + ", the slice reducer for key \"" + _key + "\" returned undefined. " + "To ignore an action, you must explicitly return the previous state. " + "If you want this reducer to hold no value, you can return null instead of undefined.");
      }

      nextState[_key] = nextStateForKey;  // 把调用的值赋值给nextState   最总用于生成整体的state值
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey;  // 对比原来值是否相同
    }

    hasChanged = hasChanged || finalReducerKeys.length !== Object.keys(state).length;  
    return hasChanged ? nextState : state;
  };
}

两个小贴士

异步函数不能直接作为action使用的原因

首先，Redux的设计就是action不可以接收或者返回Promise类型的值，在校验中会校验action类型是否为普通对象，若不为不同对象报错。
reducers 的设计基于纯函数的原则，它们接收先前的状态和 action，返回一个新的状态。如果直接将异步函数作为 action 生成器使用，reducers 可能会接收到函数或 Promise 对象，使得状态的变化变得不可控，并且可能导致 reducers 产生意外的副作用。

我们思考一下，若是action为异步函数返回对象，那么整个更新的过程就变成不可控了，而如果对需要异步的操作做一层额外的包装，使得action仍为普通对象。那么这个更新的过程我们就可以确定了。方便我们进行调试和测试。

不可变性 Immutability

如果你对源码了解的足够细致，你就会在源码中发现，关于state改变的比较，其实就是对象之间的比较，那么若是仅仅修改原值，而不是重新创建一个对象的话，地址其实是不变的，那么将会影响state生成时的逻辑，会使用未改变的值。

其次Redux中Reducer本身设计基于纯函数，而对纯函数来说

当给定相同的输入时，纯函数必须始终返回相同的值。
纯函数必须没有任何副作用。

那么对于state来说，就很有必要的重新赋值一个对象，以保证纯函数的实现。

那么本篇文章到这里也要画个句号了，感谢您的观看，希望对您有帮助

结尾：如果这篇文章有帮助到您，请点个赞支持一下 👍

转载自:https://juejin.cn/post/7270830185162293263