网站域名的组成学习网站建设论文
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) }} /> <button disabled={String(currenUsesName).trim().length === 0} onClick={() => {store.dispatch({ type: 'ADDUSER', payload: { name: currenUsesName, age: 18 } })}}>新增用户</button> <button disabled={users.length === 0} onClick={() => {store.dispatch({ type: 'DECUSER' })}}>减少用户</button><ul>{users?.map((item, index) => {return <li key={index}>姓名:{item.name} age:{item.age}</li>})}</ul></div></Fragment>)
}最后，将写好的users/index.js引入couter组件中一起展示。可以得到下图效果
效果
多个reducer的效果
总结
上一章中，是单个reducer,这时候监听的store.getState()，是直接的state值。
本章中，是多个reducer,这时候监听的store.getState()，是object对象。
counterReducer
counterReducer(state = 0, action)，counterReducer是第一个参数，是默认值；state可以是any类型，action是接收对象，默认接收是两个值{type:“”,payload}；
payload可以传可不传
store.dispatch
dispatch()其也是接收对象，其对象也是{type:“”,payload}；payload可以传可不传