关于 Redux 源码的实现及分析

最新推荐文章于 2024-05-11 20:02:21 发布
最新推荐文章于 2024-05-11 20:02:21 发布
阅读量183 收藏
点赞数
分类专栏： React 文章标签： 前端框架 redux.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_33591715/article/details/120975451
版权

Redux 源码实现及分析

本文将跟随 Crystal 分析并实现 Redux 的几个核心API，包括且不限于 createStore、getState、dispatch、subscribe
最终效果可完成对 couter 的基本增减、异步增减功能的支持

Redux 回顾 Part

在开始手撕 Redux 实现之前我们需要先回顾一下 Redux 的几个核心API

createStore
我们使用 Redux 第一步，需要创建 Store 容器，就需要使用到 createStore 这个 API
它接收三个参数，第一个是 reducer 函数，第二个是默认状态（可选），第三个是enhancer 用来增强redux功能
返回一个状态容器，包含 getState 、 dispatch 、 subscribe 等方法

getState
我们可以通过该方法获取 store 中的状态

dispatch
我们通过 dispatch 方法来触发 Action

subscribe
当 store 中的状态发生改变，会执行 subscribe 方法

Redux 实现 及 分析 Part

通过前面部分的分析我们知道核心API 都是经过 createStore 进行返回的，那么我们第一件事情就是来实现一下这个 createStore

createStore

/* 接收三个参数， 返回**核心API */
function createStore(reducer, preloadedState, enhancer) {
	return {
		getState: () => {},
		dispatch: () => {},
		subscribe: () => {},
	}
}

我们的壳子已经搭建完成，可以添加具体细节了~

getState

getState 方法的作用就是返回 store 中的状态，并且我们 createStore 第二个参数就是初始状态。故事线出来了~

function createStore(reducer, preloadedState, enhancer) {
    // 状态值
    var currentState = preloadedState;
   
    // 获取状态
    function getState () {
        return currentState
    }
    
	return {
		getState
	}
}

subscribe

状态的订阅者可能有多个，也可能会被多次调用，所以需要一个数组进行存储

function createStore(reducer, preloadedState) {
    // 订阅者函数
    var currentListeners = []

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

dispatch

dispatch 的作用是 触发 action; 目的是为了传递给 reducer , 让 reducer 对 action 进行处理后返回新的 state 给 store 完成状态更新；
状态更新需要通过 subscribe 来通知订阅者（📢 订阅者可以有多个）

function createStore(reducer, preloadedState, enhancer) {
	...
	    
    // 触发 action
    function dispatch (action) {
        currentState = reducer(currentState, action)
        // 调用订阅者 通知订阅者状态发生了改变
        for (var i = 0; i < currentListeners.length; i++) {
            // 获取订阅者
            var listener = currentListeners[i];
            // 调用订阅者
            listener();
        }
    }
    return {
		dispatch
	}
}

接下来我们加点小细节，来点小约束~

reducer 必须是一个函数

function createStore(reducer, preloadedState) {
    if (typeof reducer !== 'function') throw new Error("reducer must be a function")
  	...
}

action 必须是一个含有 type 属性的对象

// 判断参数是否是对象类型
// 判断对象的当前原型对象是否和顶层原型对象相同
function isPlainObject (obj) {
    // 排除基本类型 和 null
    if (typeof obj !== 'object' || obj === null) return false;
    // 区分数组和对象 原型对象对比的方式
    var proto = obj;
    while (Object.getPrototypeOf(proto) != null) {
      proto = Object.getPrototypeOf(proto)
    }
    return Object.getPrototypeOf(obj) === proto;
}

function createStore(reducer, preloadedState) {
	...

    // 触发 action
    function dispatch (action) {
        // 判断action是否是一个对象
        if (!isPlainObject(action)) throw new Error('action must be a object');
        // 判断action中的type属性是否存在
        if (typeof action.type === 'undefined') throw new Error('There must be a type attribute in the action object');
				...
    }
}

enhancer

通过 enhancer 可以让 createStore 的调用者对返回的 store 对象进行功能上的增强

规定 enhancer 必须是一个函数；
在调用 enhancer 函数的时候，将 createStore 方法本身、preloadedState 和reducer 都传递出去

function createStore(reducer, preloadedState, enhancer) {
    // 判断是否传递了 enhancer 函数 && enhancer 是一个函数
    if (typeof enhancer !== 'undefined') {
        if (typeof enhancer !== 'function') {
          throw new Error('enhancer must be a function')
        }
        // 这里的返回想想我们写中间件的时候昂~
        return enhancer(createStore)(reducer, preloadedState);
    }
}

中途小憩
目前我们已经基本功能完成了，可以来一波测试验证，把demo代码发来瞅瞅哈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>redux 实现部分测试 demo</title>
</head>
<body>
    <button id="increment">+1</button>
    <span id="box">0</span>
    <button id="decrement">-1</button>

    <script src="../redux/index.js"></script>
    <script>
        function reducer(state, action) {
            switch (action.type) {
                case "increment":
                    return state + 1;
                case "decrement":
                    return state - 1;
                default:
                    return state;
            }
        }

        function enhancer (createStore) {
            return function (reducer, preloadedState) {
                var store = createStore(reducer, preloadedState);
                var dispatch = store.dispatch;
                // 对 dispatch 的增强：模拟实现 redux-thunk
                function _dispatch (action) {
                    if (typeof action === 'function') {
                        return action(dispatch)
                    }
                    dispatch(action);
                }
                return {
                    ...store,
                    dispatch: _dispatch
                }
            }
        }

        const store = createStore(reducer, 0, enhancer);
        
        // 获取最新状态
        store.subscribe(function () {
            document.getElementById("box").innerHTML = store.getState();
        });
      
      	/* action 及 action 的触发 */
        document.getElementById("increment").onclick = function () {
            store.dispatch({ type: "increment" });
        };

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

小憩ending,我们继续

applyMiddleware

applyMiddleware 的作用是通过增强 dispatch 方法，让多个中间件函数进行组合以达到我们在触发 action 的时候让多个中间件按照顺序进行执行

里面涉及到的 next 参数需要注意一下：指向的是下一个中间件函数（最里层的函数）；最后一个中间件的next 指向 dispatch 方法

function applyMiddleware (...middlewares) {
    return function (createStore) {
        return function (reducer, preloadedState) {
            // 创建 store: 拿到 store 后给中间件传递参数
            var store = createStore(reducer, preloadedState);
            // 简化版的 store
            var middlewareAPI = {
                getState: store.getState,
                dispatch: store.dispatch
            }
            // 返回 中间件 函数的第二层函数
            var chain = middlewares.map(middleware => middleware(middlewareAPI));
            // 最里层函数   
            var dispatch = compose(...chain)(store.dispatch);
            return {
                ...store,
                dispatch
            }
        }
    }
}

function compose () {
    var funcs = [...arguments];
    // 想要拿到 next 函数，需要倒序执行获取
    return function (dispatch) {
        for (var i = funcs.length - 1; i >= 0; i--) {
            // 执行第二层函数，返回最里层的函数
            dispatch = funcs[i](dispatch);
        }
        // 返回的最里层的函数
        return dispatch;
    }
}

bindActionCreators

bindActionCreators 的作用是将 actionCreator 函数转换成能够触发 action 的函数，它返回一个对象

function bindActionCreators (actionCreators, dispatch) {
    var boundActionCreators = {};
    for (var key in actionCreators) {
      (function (key) {
        boundActionCreators[key] = function () {
          dispatch(actionCreators[key]())
        }
      })(key)
    }
    return boundActionCreators;
}

combineReducers

combineReducers 的作用是将小的 reducer 通过该方法组合成一个大的 reducer返回值，返回一个 reducer 函数

function combineReducers (reducers) {
    // 1. 检查reducer类型 它必须是函数
    var reducerKeys = Object.keys(reducers);
    for (var i = 0; i < reducerKeys.length; i++) {
        var key = reducerKeys[i];
        if (typeof reducers[key] !== 'function') throw new Error('reducer must be a function');
    }
    // 2. 调用一个一个的小的reducer 将每一个小的reducer中返回的状态存储在一个新的大的对象中
    return function (state, action) {
        var nextState = {};
        for (var i = 0; i < reducerKeys.length; i++) {
            var key = reducerKeys[i];
            var reducer = reducers[key];
            var previousStateForKey = state[key];
            nextState[key] = reducer(previousStateForKey, action)
        }
        return nextState;
    }
}

完整代码 Link

完整代码详见 Github

// 判断参数是否是对象类型
// 判断对象的当前原型对象是否和顶层原型对象相同
function isPlainObject (obj) {
    // 排除基本类型 和 null
    if (typeof obj !== 'object' || obj === null) return false;
    // 区分数组和对象 原型对象对比的方式
    var proto = obj;
    while (Object.getPrototypeOf(proto) != null) {
      proto = Object.getPrototypeOf(proto)
    }
    return Object.getPrototypeOf(obj) === proto;
}

function createStore (reducer, preloadedState, enhancer) {
    // reducer 类型判断
    if (typeof reducer !== 'function') throw new Error("reducer must be a function")

    // 判断是否传递了 enhancer 函数 && enhancer 是一个函数
    if (typeof enhancer !== 'undefined') {
        if (typeof enhancer !== 'function') {
          throw new Error('enhancer must be a function')
        }
        return enhancer(createStore)(reducer, preloadedState);
    }

    // 状态值
    var currentState = preloadedState;
    // 订阅者函数
    var currentListeners = []

    // 获取状态
    function getState () {
        return currentState
    }

    // 触发 action
    function dispatch (action) {
        // 判断action是否是一个对象
        if (!isPlainObject(action)) throw new Error('action must be a object');
        // 判断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,
        dispatch,
        subscribe
    }
}


function applyMiddleware (...middlewares) {
    return function (createStore) {
        return function (reducer, preloadedState) {
            // 创建 store: 拿到 store 后给中间件传递参数
            var store = createStore(reducer, preloadedState);
            // 简化版的 store
            var middlewareAPI = {
                getState: store.getState,
                dispatch: store.dispatch
            }
            // 返回 中间件 函数的第二层函数
            var chain = middlewares.map(middleware => middleware(middlewareAPI));
            // 最里层函数   
            var dispatch = compose(...chain)(store.dispatch);
            return {
                ...store,
                dispatch
            }
        }
    }
}

function compose () {
    var funcs = [...arguments];
    // 想要拿到 next 函数，需要倒序执行获取
    return function (dispatch) {
        for (var i = funcs.length - 1; i >= 0; i--) {
            // 执行第二层函数，返回最里层的函数
            dispatch = funcs[i](dispatch);
        }
        // 返回的最里层的函数
        return dispatch;
    }
}

function bindActionCreators (actionCreators, dispatch) {
    var boundActionCreators = {};
    for (var key in actionCreators) {
      (function (key) {
        boundActionCreators[key] = function () {
          dispatch(actionCreators[key]())
        }
      })(key)
    }
    return boundActionCreators;
}

function combineReducers (reducers) {
    // 1. 检查reducer类型 它必须是函数
    var reducerKeys = Object.keys(reducers);
    for (var i = 0; i < reducerKeys.length; i++) {
        var key = reducerKeys[i];
        if (typeof reducers[key] !== 'function') throw new Error('reducer must be a function');
    }
    // 2. 调用一个一个的小的reducer 将每一个小的reducer中返回的状态存储在一个新的大的对象中
    return function (state, action) {
        var nextState = {};
        for (var i = 0; i < reducerKeys.length; i++) {
            var key = reducerKeys[i];
            var reducer = reducers[key];
            var previousStateForKey = state[key];
            nextState[key] = reducer(previousStateForKey, action)
        }
        return nextState;
    }
}
CrystalAngelLee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
redux原理实现，2024阿里巴巴前端面试真题解析
2301_78416543的博客
04-01 530
store.dispatch()其功能是告诉store，用户这边发生了什么要求数据更加的行为；reducer其功能是去执行数据更改的行为；store.subscribe()其功能是检测数据是否发生变化；createStore()其接受reducer这个更改了数据之后state，然后再在createStore中执行各种操作，返回新的数据内容到store中；action其功能是用户请求的表达着，表达用户要进行什么样的操作。明白了上面的内容后我们就来进行redux原理的正式实现。
react-principle:react redux源码练习
03-24
在"react-principle:react redux源码练习"项目中，你可能会学习到如何： 1. **创建Redux Store**：了解`createStore`函数的内部工作原理，以及如何定义初始状态和Reducer。 2. **理解Action和Reducer**：编写...
redux源码超详解(附举例)
weixin_38208314的博客
09-19 2299
redux源码详解(一) 下图是redux官网一张动图，基本上解释了redux的运作原理。 store是一个全局状态机，存放全局的状态，如果想改变其中某一个状态，用dispatch发出一个action，dispatch会自动执行reduce函数，该函数会在原来state的基础上返回一个新的state对象，状态改变之后，通知所有的订阅函数，改变页面视图。 redux源码分为几个主要文件： 1.createStore.js文件：基本的redux文件，生成全局状态机 2.combineReducer.js文件：
Redux 源码解析
qq_52785898的博客
09-02 667
Redux 源码解析
2024年Web前端最新Redux源码解析系列 (四)-- 揭秘applyMiddleware工作原理，2024年最新flutter面试
最新发布
2401_84617246的博客
05-11 996
面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】96道前端面试题：常用算法面试题：内容主要包括HTML，CSS，JavaScript，浏览器，性能优化atch的功能啦~
ReactRedux源码解析与实现
问白的博客
08-30 202
在Redux源码解析与实现（一）Redux源码解析与实现（二）两篇文章中我们知道了通过可以帮助我们在大型复杂的应用中解决状态管理的问题，但我们也发现，只是分析的基本使用和源码之后，梳理了整个逻辑图如下所示： react-redux的基本使用 ract-redux的核心实现 Redux源码解析与实现（一） Redux源码解析与实现（二）
redux 源码分析
weixin_33772645的博客
12-25 174
背景 在之前的文章redux从入门到实践当中对redux的使用进行了说明，这次就来看下它的源码，从而进一步的熟悉它。 构建 相关git地址 git clone https://github.com/reduxjs/redux.git 复制代码构建文档是CONTRBUTING.md package.json "main": "lib/redux.js", // ... "scripts": { ...
高仿redux绑定小程序源码.zip
11-13
通过分析和学习这个源码，开发者可以了解到如何在微信小程序中实现状态管理的最佳实践，以及如何将Redux的思维模式应用到非React环境。这有助于提升小程序的可维护性和代码复用性，同时也能更好地组织复杂的业务逻辑...
微信小程序项目实例-redux绑定（源码）
11-05
微信小程序是一种轻量级的应用开发框架，由腾讯公司推出，旨在让开发者能够快速构建在...通过学习和分析这些源码，你可以更好地理解如何在微信小程序中运用Redux进行状态管理，从而提升小程序的开发效率和代码质量。
redux-updeep-源码.rar
10-10
在源码中，你可以看到如何使用 `updeep` 函数（可能是 Redux-Updeep 的主要实现）包装原生 reducer，以便在内部使用 immer。 2. **Immer Integration**：immer 库的核心是 `produce` 函数，它接受一个 draft state ...
source-redux:redux原始码相关分析
03-23
Redux 的源码分析可以帮助我们深入理解其工作原理，以便更好地优化和定制我们的应用。 首先，Redux 的基本架构基于三个主要概念：Store、Actions 和 Reducers。Store 是存储应用状态的地方，Actions 是描述状态变化...
redux
06-10
NULL 博文链接：https://schifred.iteye.com/blog/2339585
redux的实现（包含combineRerucers、applyMiddleware、react-redux的connect)
qq_44621394的博客
11-11 562
Redux的核心思想很简单,就是一个发布订阅监听数据的变化,再限定只能通过dispatch去更改数据。数据来源唯一数据只读,只能通过dispatch修改数据reducer是一个纯函数实现一个发布订阅实现combineReducers对reducer进行切片实现react-redux的connection函数,将发布订阅和视图渲染关联到一起实现applyMiddleware。
我的源码阅读之路：redux源码剖析
weixin_34000916的博客
09-19 252
前言 用过react的小伙伴对redux其实并不陌生，基本大多数的React应用用到它。一般大家用redux的时候基本都不会单独去使用它，而是配合react-redux一起去使用。刚学习redux的时候很容易弄混淆redux和react-redux，以为他俩是同一个东西。其实不然，redux是javascript应用程序的可预测状态容器,...
Redux 原理与实现
weixin_66501371的博客
12-14 299
redux中间件
react-redux实现原理
qq_41101870的博客
05-07 2113
react-redux的基本使用 安装redux和react-redux yarn add redux react-redux 编写reducer并创建store import { createStore } from 'redux' const countReducer = (state = 0, action) => { console.log('state', state); switch (action.type) { case 'ADD':
redux的isPlainObject源码
神以灵的博客
08-18 844
isPlainObject函数是redux自己用来判断传递给reducer的action对象是一个plain object，也就是通过字面量方式或者Object构造函数的方式生成的对象，中间没有发生其他的继承情况，保持action对象是一个plain object的作用是，方便reducer进行处理，不用处理其他的情况（例如：promise/function/class实例等等），另一方面，...
Redux流程分析与实现
weixin_34407348的博客
07-31 475
#概述 随着应用程序单页面需求的越来越复杂，应用状态的管理也变得越来越混乱，而Redux的就是为解决这一问题而出现的。在一个大型的应用程序中，应用的状态不仅包括从服务器获取的数据，还包括本地创建的数据，以及反应本地UI状态的数据，而Redux正是为解决这一复杂问题而存在的。 redux作为一种单向数据流的实现，配合react非常好用，尤其是在项目比较大，逻辑比较复杂的时候，单项数据流的思想能使数据...
redux真的不复杂——源码解读
赵乘风_i
09-11 2989
前言 阅读对象：使用过redux，对redux实现原理不是很理解的开发者。 在我实习入职培训的时候，我的前端组长就跟我说过，redux的核心源码很简洁，建议我有空去看一下，提升对redux系列的理解。 入职一个多月了，已经参与了公司的不少项目，redux也使用了一段时间，对于redux的理解却一直没有深入，还停留在“知道怎么用，但是不知道其核心原理”的阶段。 所以就在github上拉了...
edux: redux 的实现原理
07-24
总的来说，Redux 的实现原理是通过单一数据源、纯函数修改状态、订阅通知和中间件增强来管理应用程序的状态，并与 React 紧密集成，实现了可预测、可维护的状态管理。这种架构模式使得应用程序的状态变化可追踪、可...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值