第二章 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>
    )
}

最后，将写好的users/index.js引入couter组件中一起展示。可以得到下图效果

效果

总结

上一章中，是单个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可以传可不传