redux的combineReducers简单实现

最新推荐文章于 2024-07-14 17:12:17 发布

原创最新推荐文章于 2024-07-14 17:12:17 发布 · 701 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 3 个专栏收录

62 篇文章

订阅专栏

es6

24 篇文章

订阅专栏

redux

8 篇文章

订阅专栏

本文深入解析了Redux中combineReducers函数的工作原理，包括其如何整合多个reducer、分步执行过程以及如何处理action和state。同时，介绍了combineReducers的直接使用与别名使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

combineReducers简单封装

const combineReducers = reducers => {
  return (state = {}, action) => {
    return Object.keys(reducers).reduce(
      (nextState, key) => {
        nextState[key] = reducers[key](state[key], action);
        return nextState;
      },
      {} 
    );
  };
};

//分步解析
function(reducers){}() //执行输出 传入reducers

function(state, action){}() //执行输出 传入state action

const reducerArr = Object.keys(reducers) //得到reducer数组(key值数组)

reducerArr.reduce(fn,{}) //执行reduce函数

function fn(nextState, key){  //这里的nextState是一个通过参数方式新定义的变量,首次初始化指向reduce的第二个参数{}，执行过后返回的值作为第二次fn的入参

  nextState[key] = reducers[key](state[key], action);//存储接收action和旧state后生成的新的state
  return nextState;
}

使用，分为直接使用和别名使用：

import { combineReducers } from 'redux';
//直接使用
const chatReducer = combineReducers({
  chatLog,
  statusMessage,
  userName
})
//别名使用
const reducer = combineReducers({
  a: doSomethingWithA,
  b: processB,
  c: c
})