07react18-Redux(上篇)

Redux

Redux 是React最常用的集中狀態(tài)管理工具，類似于Vue中的Pinia（Vuex），可以獨(dú)立于框架運(yùn)行
作用：通過集中管理的方式管理應(yīng)用的狀態(tài)
為什么要使用Redux？

  1. 獨(dú)立于組件，無視組件之間的層級關(guān)系，簡化通信問題
  2. 單項(xiàng)數(shù)據(jù)流清晰，易于定位bug
  3. 調(diào)試工具配套良好，方便調(diào)試

Redux與React - 環(huán)境準(zhǔn)備

Redux雖然是一個框架無關(guān)可以獨(dú)立運(yùn)行的插件，但是社區(qū)通常還是把它與React綁定在一起使用，以一個計(jì)數(shù)器案例體驗(yàn)一下Redux + React 的基礎(chǔ)使用

1. 配套工具

在React中使用redux，官方要求安裝倆個其他插件 - Redux Toolkit 和 react-redux

  1. Redux Toolkit（RTK）- 官方推薦編寫Redux邏輯的方式，是一套工具的集合集，簡化書寫方式
  2. react-redux - 用來 鏈接 Redux 和 React組件 的中間件

2. 配置基礎(chǔ)環(huán)境

  1. 使用 CRA 快速創(chuàng)建 React 項(xiàng)目
npx create-react-app react-redux
  1. 安裝配套工具
npm i @reduxjs/toolkit  react-redux

3.啟動項(xiàng)目

npm run start

3. store目錄結(jié)構(gòu)設(shè)計(jì)

image.png
  1. 通常集中狀態(tài)管理的部分都會單獨(dú)創(chuàng)建一個單獨(dú)的 store 目錄
  2. 應(yīng)用通常會有很多個子store模塊，所以創(chuàng)建一個 modules 目錄，在內(nèi)部編寫業(yè)務(wù)分類的子store
  3. store中的入口文件 index.js 的作用是組合modules中所有的子模塊，并導(dǎo)出store
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容