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) }} /> <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可以傳可不傳
＞)
