[email protected](58)[email protected](7)- 实现 combineReducers

目录

1,分析

大型项目中,数据和操作都比较复杂,所以会对 reducer 进行细分管理。

combineReducers 的作用:结合多个 reducer

举例:

js 复制代码
// reducer.js
import { combineReducers } from "redux";
import loginReducer from "./login";
import userReducer from "./user";

export default combineReducers({
    a: loginReducer,
    b: userReducer,
});
js 复制代码
// 使用
import { createStore } from "redux";
import reducer from "./reducer";

const store = createStore(reducer);

2,实现

2.1,简单实现

js 复制代码
// reducer.js
import loginReducer from "./login";
import userReducer from "./user";

export default (state = {}, action) => {
    const newState = {
        a: loginReducer(state.a, action),
        b: userReducer(state.b, action),
    };
    return newState;
};

解释
createStore(reducer) 初始化时,会调用一次 reducer,此时 state.a = undefined,所以会使用 loginReducer(state = {}) 的默认值进行初始化,并将返回值作为 newState.a 的初始值保存。

之后分发指定 action 时,state.a 就是旧值{} ,作为 loginReducerstate 传入。

2.2,参考源码具体实现

在使用官方的 combineReducers 时,发现了2个特点:

  • 所有细分的 reducerstate 参数必须指定初始值 ,如果不想指定,需要默认为 null,而不是 undefined(相当于没有指定初始值)。
  • 所有细分的 reducer 中,不能使用特殊的 type 来判断做一些事情。

举例1 :没有初始值,得指定为 null

js 复制代码
// reducer/xxx.js
export default (state = null, { type, payload }) => {
    switch (type) {
        case LOGIN:
            return payload;
        default:
            return state;
    }
};

举例2 :特殊的 type,比如 createStore() 初始化时的 type=@@redux/INITw.2.n.b.2.o;还有 combineReducers() 初始化时的 type=@@redux/PROBE_UNKNOWN_ACTIONe.a.v.4.3.3

不能在某个 reducer 中使用这2个特殊 type会报错

js 复制代码
// reducer/xxx.js
export default (state = null, { type, payload }) => {
    switch (type) {
        case type.startsWith("@@redux/INIT"):
            console.log("craeteStore 初始化");
        case type.startsWith("@@redux/PROBE_UNKNOWN_ACTION"):
            console.log("combineReducers 初始化");
        default:
            return state;
    }
};

实现

js 复制代码
export const combineReducers = (reducers) => {
    validate(reducers);
    return (state = {}, action) => {
        let newState = {};
        for (const key in reducers) {
            if (Object.hasOwnProperty.call(reducers, key)) {
                const reducer = reducers[key];
                // 参考上面的简单实现。
                newState[key] = reducer(state[key], action);
            }
        }
        return newState;
    };
};

function validate(reducers) {
    if (typeof reducers !== "object" || Object.getPrototypeOf(reducers) !== Object.prototype) {
        throw new Error("reducers 必须是一个 plain Object");
    }
    for (const key in reducers) {
        if (Object.hasOwnProperty.call(reducers, key)) {
            const reducer = reducers[key];
            // 判断是否进行了初始化,和是否使用了特殊 type
            let state = reducer(undefined, { type: `@@redux/INIT${getRandomString()}` });
            if (state === undefined) {
                throw new TypeError("reducers must not return undefined");
            }
            state = reducer(undefined, { type: `@@redux/PROBE_UNKNOWN_ACTION${getRandomString()}` });
            if (state === undefined) {
                throw new TypeError("reducers must not return undefined");
            }
        }
    }
}

function getRandomString() {
    return Math.random().toString(36).substring(2, 8).split("").join(".");
}

以上。

相关推荐
^小桃冰茶1 小时前
HTML 从标签到动态效果的基础
前端·html
火柴盒zhang1 小时前
基于HTML CANVAS和EXCEL的xlsx文件展示工具websheet
前端·javascript·html·spreadsheet·websheet
一城烟雨_5 小时前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
树懒的梦想6 小时前
调整vscode的插件安装位置
前端·cursor
低代码布道师7 小时前
第二部分:网页的妆容 —— CSS(下)
前端·css
一纸忘忧7 小时前
成立一周年!开源的本土化中文文档知识库
前端·javascript·github
涵信8 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子8 小时前
CSS单位完全指南
前端·css
SunTecTec9 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
软件技术NINI9 小时前
html css js网页制作成品——HTML+CSS甜品店网页设计(4页)附源码
javascript·css·html