关于 Redux 源码的实现及分析

最新推荐文章于 2022-11-11 16:58:45 发布
最新推荐文章于 2022-11-11 16:58:45 发布
阅读量212 收藏
点赞数
分类专栏： 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;
    }
}
Redux源码分析
谢杨易的博客
07-20 1万+
1 redux使用步骤React仅仅是一个前端View框架库，可以看做是MVC里面的V。没有解决组件间通信，MVC分离，数据共享等问题。Redux的出现使得这些都不是问题。使用Redux也比较简单，步骤大概如下 编写React Component，这里不涉及Redux 编写reducer，它接收一个state和action，返回一个新的state createStore(reducer) 得到sto
实现一个redux
qq_36737839的博客
01-06 312
大纲 1、store、state、action、store.dispatch、reducer的概念 2、redux 单向数据流流程说明 3、实现一个 redux 4、中间件日志打印及异步调用实现 代码地址： https://github.com/huangwenjuning/offer-coming-soon/tree/master/redux 基础概念 store 整个项目只能有一个 store，store 可以看做是一个数据容器， 用于保存数据。 redux 提供了 createStore 方法用于生
[Redux/Mobx] 说说Redux的实现流程
歌谣的博客
11-30 553
[Redux/Mobx] 说说Redux的实现流程 通过分析redux的几个核心api，来看如何实现redux store.subscribe: 订阅数据的变化 store.dispatch：dispatch后改变state,同时通知store.subscribe函数执行，上面这两个函数可以利用发布-订阅模式 store.getState: 通过这个函数直接返回内存中的state变量即可 简单的实现如下 export function createStore(reducer, enhancer)
redux源码详解
杏树林
03-15 1148
redux是基于flux单向数据流的一种实现，功能很强大，源码很精炼，可以扩展出各种中间件，so 酷。createStore.js这个文件其实很简单，首先我们来看一下它接受的参数。 function createStore(reducer, initialState){} 这里的reducer就是 combineReducers后的rootReducer，当我们dispatch一个action的时候
Redux源码分析(一)
Jason's Word
11-06 388
Redux源码分析 使用redux都快3年了，到现在也没认真去了解一下源码罪过啊，所以需要对它进行一些分析和学习，一方面能更好的去使用它，另一方面也学习一下该框架的设计思路，首先我们看到 redux/src/index.js 文件 export { createStore, combineReducers, bindActionCreators, applyMiddleware, ...
Redux源码浅析系列(四)：`applyMiddleware`
胖猫的博客
02-10 664
前面主要介绍了createStore，combineReducers,compose的实现原理，下面，我们看一下 redux中最有意思的中间件部分applyMiddleware。 applyMiddleware代码很简洁，但是含义很广泛。我们来一起看一下： 首先，我们先来重温一下中间件的使用方法： 调用中间件 来看一下createStore的源码 if (typeof prelo...
Redux源码浅析系列(一)：`CreateStore`
胖猫的博客
02-10 842
使用react+redux开发有一段时间了，刚开始使用并没有深入了解其源码，最近静下心来，阅读了一下，感触颇深。 本系列主要从createStore,combineReducer,compose,applyMiddleware几个方面进行讲解。本系列不会详细讲解redux的用法，因此可能更适合有redux使用经验的小伙伴们阅读。 store是redux中用来存储所有state树的一个对象，改变...
redux源码逐行分析
技术无止境，人生仍探索。
05-27 408
git地址：前端流行框架源码分析???? 说明：Redux源码ES5版本的逐行解析，所有的英文注释全部做了意译。 版本：4.0.5 源码位置 源码逐行解析（注释逐行翻译） 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); function _interopDefault (ex) { return (ex && (typeof ex === 'object') &&
react-principle:react redux源码练习
03-24
在"react-principle:react redux源码练习"项目中，你可能会学习到如何： 1. **创建Redux Store**：了解`createStore`函数的内部工作原理，以及如何定义初始状态和Reducer。 2. **理解Action和Reducer**：编写...
深入分析redux和react-redux源码：从基础到进阶
资源摘要信息: "本文旨在提供对redux和react-redux源码的深入解析。 redux是一个用于JavaScript应用程序的状态容器库，而react-redux是其与React的绑定，允许你在React应用中使用redux管理状态。本解析将不局限于对...
微信小程序 Redux Todo 源码分析
在深入分析这份资源之前，首先需要明确几个关键点：小程序、无后台、源码、微信、Redux、待办事项管理。 ### 小程序基础 小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫...
redux设计实现
01-06
本系统实现redux设计思想，主要功能是一个计数器
redux源码
Spider--Man
04-02 985
1、redux初始化最先做的是使用createStore创建store，store用于管理state createStore(reducer, preloadedState, enhancer) // 传入preloadedState对象作为redux的默认state，当使用combineReducers()方法合并多个reducer时，传入的preloadedState对象key值必须与合并red
redux 源码分析
weixin_33772645的博客
12-25 202
背景 在之前的文章redux从入门到实践当中对redux的使用进行了说明，这次就来看下它的源码，从而进一步的熟悉它。 构建 相关git地址 git clone https://github.com/reduxjs/redux.git 复制代码构建文档是CONTRBUTING.md package.json "main": "lib/redux.js", // ... "scripts": { ...
redux的实现（包含combineRerucers、applyMiddleware、react-redux的connect)
qq_44621394的博客
11-11 616
Redux的核心思想很简单,就是一个发布订阅监听数据的变化,再限定只能通过dispatch去更改数据。数据来源唯一数据只读,只能通过dispatch修改数据reducer是一个纯函数实现一个发布订阅实现combineReducers对reducer进行切片实现react-redux的connection函数,将发布订阅和视图渲染关联到一起实现applyMiddleware。
Redux实现
ShaoDu的博客
10-14 163
简介        官方意思：Redux 是 JavaScript 状态容器，提供可预测化的状态管理，        现在很多时候都是将Redux和React放在一起，因为React提出将展示组件与容器组件分离的思想，所以降低了React 与Redux之间的耦合度。        对于Redux架构的
Redux源码解读
weixin_34281477的博客
06-03 177
前言 作为React全家桶的一份子，Redux为react提供了严谨周密的状态管理。但Redux本身是有点难度的，虽然学习了React也有一段时间了，自我感觉算是入了门，也知道redux的大概流程。但其背后诸如creatstore,applymiddleware等API背后到底发生了什么事情，我其实还是不怎么了解的，因此最近花了几天时间阅读了Redux的源码，写下文章纪录一下自己看源码的一些理解。...
实现一个简单的Redux
杏子
03-06 409
一、前言 Redux并不是一门语言，也不是一个框架，不过可以理解为是一种数据流框架，而不是我们平常用的React类似的UI框架。Redux更像是一种思想或者设计模式。以数据对象为核心，根据不同的事件类型，响应不同的状态，然后执行状态修改之后的事件。这里其实跟我上一篇的博客，面向过程与面向对象的区别可以结合着看。 先说一下这种思想的步骤： 1. 以数据对象为核心，具体说是数据状态； 2. 分...
redux原理实现
domino~~的博客
06-09 3818
redux原理实现 在明白redux的原理之前，我们需要知道的就是redux的作用。redux其实就是根据react封装的一个库，其解决的问题就是处理异步数据。其基本思想就是将所有的数据与有关与数据的操作都放在store当中，那么为什...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值