第二章 react redux的学习，多个reducer

2025/9/15 7:33:08 来源：https://blog.csdn.net/yunjin0101/article/details/147003381 浏览: 次关键词：第二章 react redux的学习，多个reducer

redux系列文章目录

第一章简单学习redux,单个reducer

第三章 redux和react-redux，@reduxjs/toolkit依赖结合使用

第四章 react-redux，@reduxjs/toolkit依赖，学习

第五章两张图告诉你redux常使用的api有哪些

前言

前面我们学习到的是单reducer的使用；要知道redux是个很强大的状态存储库，可以支持多个reducer的使用。

combineReducers

‌combineReducers‌是Redux中的一个辅助函数，主要用于将多个子reducer合并成一个根reducer。这个函数接收一个对象，对象的键是子reducer的名称，值是子reducer函数。合并后的reducer可以调用各个子reducer，并将它们的结果合并成一个state对象。

代码

准备工作
基于上一章代码写新reducer，新增src/pages/users/index.js文件;新增src/redux/userReducer.js文件

store.js

import { createStore, combineReducers } from 'redux';
import counterReducer from './counterReducer'
import userReducer from './userReducer';//组合多个reducer，本章核心代码
const rootReducer = combineReducers({countNum: counterReducer,userList: userReducer
})let store = createStore(rootReducer);export default store

userReducer.js


function userReducer(state =[], action) {switch (action.type) {case 'ADDUSER':state.push(action.payload)return state;case 'DECUSER':// state.slice(0, -1)return state.slice(0, -1); ;default:return state;}
}   export default userReducer;

users/index.js

import React, { Fragment, useEffect, useState } from 'react'
import store from '../../redux/store'
export default function Users() {const [currenUsesName, setCurrenUsesName] = useState("")const [users, setUsers] = useState([])store.subscribe(() => {const { userList } = store.getState()setUsers((olduser)=>{return [...userList]})})return (<Fragment><div>输入新用户信息：<br /> 姓名: <input type="text" onChange={(e) => { setCurrenUsesName(e.target.value) }} />&nbsp;<button disabled={String(currenUsesName).trim().length === 0} onClick={() => {store.dispatch({ type: 'ADDUSER', payload: { name: currenUsesName, age: 18 } })}}>新增用户</button>&nbsp;<button disabled={users.length === 0} onClick={() => {store.dispatch({ type: 'DECUSER' })}}>减少用户</button><ul>{users?.map((item, index) => {return <li key={index}>姓名:{item.name} &nbsp; age:{item.age}</li>})}</ul></div></Fragment>)
}