redux核心逻辑及redux中常用API的方法实现

最新推荐文章于 2023-02-24 15:58:00 发布

拉勾小迷弟

最新推荐文章于 2023-02-24 15:58:00 发布

阅读量394

点赞数

本文链接：https://blog.csdn.net/weixin_43016472/article/details/119533782

版权

本文深入解析Redux的核心逻辑，包括createStore、applyMiddleware、combineReducers与bindActionCreators的实现。探讨如何增强dispatch方法，以及这些方法在Redux应用中的作用。中间件机制允许自定义dispatch行为，而combineReducers则方便地组合多个reducer。bindActionCreators则用于将action与dispatch连接，简化组件中的action调用。

摘要由CSDN通过智能技术生成

redux核心通过获取调用creactStore获取store核心getState()方法、dispath()方法、subscribe()方法

首先定义creactStore方法，方法有三个参数reducer(ruducer函数)，preloadedState(状态),enhancer(加强dispath方法)

function createStore (reducer, preloadedState, enhancer) {
   
// reducer 类型判断 
  if (typeof reducer !== 'function') throw new Error('redcuer必须是函数');
}

定义初始状态,getState方法返回状态

// 状态
  var currentState = preloadedState;
  // 获取状态
  function getState () {
   
    return currentState;
  }

subscribe方法参数是一个函数，数据改变时调用函数参数,所以subscribe的参数调用需要用到发布订阅模式，同时subscribe可能会多次调用，这里用数组存储传递进来的函数参数，当调用dispath时触发

// 订阅者
  var currentListeners = [];
  // 订阅状态的改变
  function subscribe (listener) {
   
    currentListeners.push(listener);
  }

dispath方法触发action,action必须是一个对象且必须有type属性

function dispatch (action) {
   
    // 判断action是否是一个对象
    if (!isPlainObject(action)) throw new Error('action必须是一个对象');
    // 判断action中的type属性是否存在
    if (typeof action.type === 'undefined') throw new Error('action对象中必须有type属性');
    // 调用reducer函数 处理状态
    currentState = reducer(currentState, action);
    // 调用订阅者 通知订阅者状态发生了改变
    for (var i = 0; i < currentListeners