当前位置：首页 > news >正文

react redux的学习，多个reducer

news 来源：原创 2025/9/6 2:12:02

redux系列文章目录

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

前言

前面我们学习到的是单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>)
}

最后，将写好的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可以传可不传