Redux核心源码解析

最新推荐文章于 2022-09-02 18:49:11 发布

进阶__前端

最新推荐文章于 2022-09-02 18:49:11 发布

阅读量440

点赞数

分类专栏： react react源码解析文章标签： redux reactjs

本文链接：https://blog.csdn.net/qq_38074118/article/details/113791030

版权

本文深入解析Redux的核心逻辑，包括createStore方法、参数类型约束、Enhancer方法实现、applyMiddleware的原理及应用、bindActionCreators的功能与用途，以及combineReducers的实现。通过对源码的分析，阐述了Redux如何处理action、增强store功能以及如何组合管理多个reducer。

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

核心逻辑

目标：自己实现redux的核心逻辑

最核心的就是createStore方法，接收reducer，preloadedState预存储的state状态，enhancer对store的功能进行增加
调用之后会返回一个对象，含有getState获取状态，dispatch，subscribe

源码地址：https://github.com/qifutian/learngit/tree/main/redux%E5%8F%8A%E4%B8%AD%E9%97%B4%E4%BB%B6/myRedux
自定义redux，myRedux.js

/**
 * 
 * createStore(reducer,preloadedState,enhancer)
 * 
 * {getState,dispatch,subscribe}
 */

 function createStore(reducer,preloadedState,enhancer){
   
     // store对象中存储的状态
     var currentState = preloadedState;
     // 存放订阅者函数
     var currentListeners = [];
     // 获取状态 将state放到内存中
     function getState(){
   
         return  currentState
     }

     // 触发action
     function dispatch(action){
   
         currentState = reducer(currentState,action);
         // 循环数组 调用订阅者
         for(var i=0; i<currentListeners.length;i++){
   
             // 获取订阅者
             var listener = currentListeners[i];
             // 调用订阅者
             listener();
         }
     }

     // 订阅状态
     function subscribe(listener) {
   
        currentListeners.push(listener)
     }

     return {
   
         getState,
         dispatch,
         subscribe
     }
 }


//  store.subscribe(() =>{
   

//  })

检查是否可用，测试代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="increment">+1</button>
    <span id="box">0</span>
    <button id="decrement">-1</button>
    <script src="./myRedux.js"></script>
   
    
<script>
  function reducer(state,action){
   
     switch(action.type){
   
       case 'increment':
         return state + 1;
        case 'decrement':
          return state - 1;
        default:
          return state;   
     }     
  }

  // 创建store
  var store = createStore(reducer,0);
  console.log(store.getState())

  store.subscribe(function () {
   
      document.getElementById("box").innerHTML = store.getState().counter;
  });

  document.getElementById("increment").onclick = function () {
   

        store.dispatch({
    type: "increment" });
      };

  document.getElementById("decrement").onclick = function () {
   
    store.dispatch({
    type: "decrement" });
  };
</script>
  </body>
</html>

参数类型约束

reducer必须是函数
action必须是对象

/**
 * 
 * createStore(reducer,preloadedState,enhancer)
 * 
 * {getState,dispatch,subscribe}
 */

 function createStore(reducer,preloadedState,enhancer){
   
    // 约束reducer参数类型
    if(typeof reducer!== 'function') throw new Error("reducer必须是函数")
    
     // store对象中存储的状态
     var currentState = preloadedState;
     // 存放订阅者函数
     var currentListeners = [];
     // 获取状态 将state放到内存中
     function getState(){
   
         return  currentState
     }

     // 触发action
     function dispatch(action){
   
 // 判断action是否是一个对象
    if (!isPlainObject(action)) throw new Error('action必须是一个对象');
    // 判断action中的type属性是否存在
    if (typeof action.type === 'undefined') throw new Error('action对象中必须有type属性');
         currentState = reducer(currentState,action);
         // 循环数组 调用订阅者
         for(var i=0; i<currentListeners.length;i++){
   
             // 获取订阅者
             var listener = currentListeners[i];
             // 调用订阅者
             listener();
         }
     }

     // 订阅状态
     function subscribe(listener) {
   
        currentListeners.push(listener)
     }

     return {
   
         getState

最低0.47元/天解锁文章

进阶__前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Redux核心源码解析

核心逻辑目标：自己实现redux的核心逻辑最核心的就是createStore方法，接收reducer，preloadedState预存储的state状态，enhancer对store的功能进行增加调用之后会返回一个对象，含有getState获取状态，dispatch，subscribe自定义redux，myRedux.js/** * * createStore(reducer,preloadedState,enhancer) * * {getState,dispatch,subsc
复制链接

扫一扫

专栏目录