Redux
Redux 是React最常用的集中狀態(tài)管理工具秧均，類(lèi)似于Vue中的Pinia（Vuex），可以獨(dú)立于框架運(yùn)行
作用：通過(guò)集中管理的方式管理應(yīng)用的狀態(tài)
為什么要使用Redux帚屉？
- 獨(dú)立于組件捡遍，無(wú)視組件之間的層級(jí)關(guān)系缰揪，簡(jiǎn)化通信問(wèn)題
- 單項(xiàng)數(shù)據(jù)流清晰，易于定位bug
- 調(diào)試工具配套良好推盛，方便調(diào)試
Redux與React - 環(huán)境準(zhǔn)備
Redux雖然是一個(gè)框架無(wú)關(guān)可以獨(dú)立運(yùn)行的插件峦阁，但是社區(qū)通常還是把它與React綁定在一起使用，以一個(gè)計(jì)數(shù)器案例體驗(yàn)一下Redux + React 的基礎(chǔ)使用
1. 配套工具
在React中使用redux耘成，官方要求安裝倆個(gè)其他插件 - Redux Toolkit 和 react-redux
- Redux Toolkit（RTK）- 官方推薦編寫(xiě)Redux邏輯的方式榔昔，是一套工具的集合集驹闰，簡(jiǎn)化書(shū)寫(xiě)方式
- react-redux - 用來(lái) 鏈接 Redux 和 React組件 的中間件
2. 配置基礎(chǔ)環(huán)境
- 使用 CRA 快速創(chuàng)建 React 項(xiàng)目
npx create-react-app react-redux
- 安裝配套工具
npm i @reduxjs/toolkit react-redux
3.啟動(dòng)項(xiàng)目
npm run start
3. store目錄結(jié)構(gòu)設(shè)計(jì)
image.png
- 通常集中狀態(tài)管理的部分都會(huì)單獨(dú)創(chuàng)建一個(gè)單獨(dú)的
store目錄 - 應(yīng)用通常會(huì)有很多個(gè)子store模塊，所以創(chuàng)建一個(gè)
modules目錄撒会，在內(nèi)部編寫(xiě)業(yè)務(wù)分類(lèi)的子store - store中的入口文件 index.js 的作用是組合modules中所有的子模塊嘹朗，并導(dǎo)出store
