[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(".");
}

以上。

相关推荐
Allen Bright19 分钟前
【HTML-2】HTML 标题标签:构建网页结构的基础
前端·html
Dragon Wu30 分钟前
Taro Error: chunk common [mini-css-extract-plugin]
前端·小程序·前端框架·react·taro
Dragon Wu34 分钟前
Taro 安全区域
前端·小程序·前端框架·taro
yuren_xia39 分钟前
Vue3 组件之间传值
前端·javascript·vue.js
爱吃鱼的锅包肉41 分钟前
记录一下flutter项目自己封窗的弹窗
前端·javascript·flutter
Frank学习路上41 分钟前
【Flutter】创建BMI计算器应用并添加依赖和打包
前端·javascript·flutter
黄暄1 小时前
Spring Boot 登录实现:JWT 与 Session 全面对比与实战讲解
javascript·网络·spring boot·后端
风清云淡_A1 小时前
【react18】在styled-components中引入图片报错
前端·reactjs
JiaLin_Denny1 小时前
react中运行 npm run dev 报错,提示vite.config.js出现错误 @esbuild/win32-x64
javascript·react.js·npm·esbuild·config.js·run dev
GUIQU.2 小时前
【Node.js】Web开发框架
前端·node.js