React狀態(tài)管理的簡明指南
一、Redux介紹
Redux 是React最常用的集中狀態(tài)管理工具，類似于Vue中的Pinia（Vuex），可以獨立于框架運行
作用：通過集中管理的方式管理應(yīng)用的狀態(tài)
為什么要使用Redux？
- 獨立于組件，無視組件之間的層級關(guān)系，簡化通信問題
- 單項數(shù)據(jù)流清晰，易于定位bug
- 調(diào)試工具配套良好，方便調(diào)試
二、Redux快速體驗
在這一部分，我們將通過兩個簡單的步驟來快速體驗Redux的基本概念。
1. 實現(xiàn)計數(shù)器
首先，讓我們創(chuàng)建一個簡單的計數(shù)器應(yīng)用程序，以便更好地理解Redux的基本概念。我們將展示如何設(shè)置Redux，創(chuàng)建一個簡單的store，并通過actions和reducers實現(xiàn)一個計數(shù)器。
// 定義action類型
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
// 定義action創(chuàng)建函數(shù)
const increment = () => ({
type: INCREMENT
});
const decrement = () => ({
type: DECREMENT
});
// 定義reducer
const counterReducer = (state = 0, action) => {
switch (action.type) {
case INCREMENT:
return state + 1;
case DECREMENT:
return state - 1;
default:
return state;
}
};
// 創(chuàng)建store
const { createStore } = Redux;
const store = createStore(counterReducer);
// 訂閱state變化
store.subscribe(() => {
console.log('Current state:', store.getState());
});
// 分發(fā)action
store.dispatch(increment()); // 輸出：Current state: 1
store.dispatch(decrement()); // 輸出：Current state: 0
通過上述代碼，我們成功創(chuàng)建了一個Redux store、定義了action和reducer，并通過dispatch觸發(fā)了state的變化。
2. Redux數(shù)據(jù)流架構(gòu)
Redux的數(shù)據(jù)流架構(gòu)是其核心概念之一。以下是一個簡單的表格，描述了Redux中的state、action和reducer三個概念：
| 概念 | 描述 |
|---|---|
| State | 應(yīng)用程序的當(dāng)前狀態(tài)，存儲在Redux的store中。 |
| Action | 對狀態(tài)進行描述的對象，包含type和payload等屬性。 |
| Reducer | 根據(jù)收到的action來更新state的純函數(shù)。 |
理解Redux的數(shù)據(jù)流架構(gòu)有助于我們更好地組織和管理應(yīng)用的狀態(tài)，為后續(xù)更復(fù)雜的應(yīng)用場景打下基礎(chǔ)。在接下來的部分，我們將繼續(xù)深入學(xué)習(xí)Redux與React的結(jié)合，以更好地應(yīng)用這一架構(gòu)。
三、Redux與React - 環(huán)境準備
Redux雖然是一個框架無關(guān)可以獨立運行的插件，但是社區(qū)通常還是把它與React綁定在一起使用，以一個計數(shù)器案例體驗一下Redux + React 的基礎(chǔ)使用
1. 配套工具
在React中使用redux，官方要求安裝倆個其他插件 - Redux Toolkit 和 react-redux
Redux Toolkit（RTK）- 官方推薦編寫Redux邏輯的方式，是一套工具的集合集，簡化書寫方式
react-redux - 用來 鏈接 Redux 和 React組件 的中間件
2. 配置基礎(chǔ)環(huán)境
- 使用 CRA 快速創(chuàng)建 React 項目
npx create-react-app react-redux
- 安裝配套工具
npm i @reduxjs/toolkit react-redux
- 啟動項目
npm run start
3. store目錄結(jié)構(gòu)設(shè)計
通常集中狀態(tài)管理的部分都會單獨創(chuàng)建一個單獨的
store目錄應(yīng)用通常會有很多個子store模塊，所以創(chuàng)建一個
modules目錄，在內(nèi)部編寫業(yè)務(wù)分類的子storestore中的入口文件 index.js 的作用是組合modules中所有的子模塊，并導(dǎo)出store
四、Redux與React - 實現(xiàn)Counter
在這一部分，我們將詳細介紹如何在React應(yīng)用中實現(xiàn)一個基本的計數(shù)器功能，通過Redux來管理狀態(tài)。
1. 整體路徑熟悉
首先，讓我們熟悉整體的路徑。在React中，我們將使用Redux來管理應(yīng)用的狀態(tài)，而計數(shù)器將作為一個簡單的示例，幫助我們理解Redux與React的集成。
2. 使用React Toolkit 創(chuàng)建 counterStore
為了簡化Redux的使用，我們將使用Redux Toolkit來創(chuàng)建我們的store。Redux Toolkit提供了一組工具，使Redux的使用更加簡單和便捷。
// 安裝Redux Toolkit npm install @reduxjs/toolkit
然后，創(chuàng)建我們的counterStore：
// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';
export const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: (state) => state + 1,
decrement: (state) => state - 1,
},
});
export const { increment, decrement } = counterSlice.actions;
export const selectCount = (state) => state.counter;
// store.js
import { configureStore } from '@reduxjs/toolkit';
import { counterSlice } from './counterSlice';
export const store = configureStore({
reducer: {
counter: counterSlice.reducer,
},
});
3. 為React注入store
在React應(yīng)用中，我們需要在頂層組件處注入Redux的store。這通常在應(yīng)用的入口文件中完成。
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
4. React組件使用store中的數(shù)據(jù)
在React組件中，我們可以使用useSelector來獲取store中的數(shù)據(jù)，并展示在UI上。
// CounterComponent.js
import React from 'react';
import { useSelector } from 'react-redux';
import { selectCount } from './counterSlice';
const CounterComponent = () => {
const count = useSelector(selectCount);
return (
<div>
<p>Count: {count}</p>
</div>
);
};
export default CounterComponent;
5. React組件修改store中的數(shù)據(jù)
為了修改store中的數(shù)據(jù)，我們可以使用useDispatch來派發(fā)actions。
// CounterControls.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';
const CounterControls = () => {
const dispatch = useDispatch();
return (
<div>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
};
export default CounterControls;
通過上述步驟，我們成功地在React應(yīng)用中實現(xiàn)了一個基本的計數(shù)器，并通過Redux來管理其狀態(tài)。在接下來的部分，我們將進一步探討Redux與React的其他集成方式以及更復(fù)雜的應(yīng)用場景。
五、Redux與React - 提交Action傳參
在這一部分，我們將學(xué)習(xí)如何在React應(yīng)用中提交帶有參數(shù)的Redux Action，以便更靈活地處理不同的情境。
1. 提交帶有參數(shù)的Action
Redux Actions可以攜帶參數(shù)，允許我們在不同的場景下發(fā)送不同的信息。以下是一個簡單的例子，展示如何提交帶有參數(shù)的Action：
// actions.js
export const setCounter = (value) => ({
type: 'SET_COUNTER',
payload: value,
});
在React組件中，我們可以這樣使用：
// CounterComponent.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { setCounter } from './actions';
const CounterComponent = () => {
const dispatch = useDispatch();
const handleSetCounter = (value) => {
dispatch(setCounter(value));
};
return (
<div>
<button onClick={() => handleSetCounter(10)}>Set Counter to 10</button>
<button onClick={() => handleSetCounter(20)}>Set Counter to 20</button>
</div>
);
};
export default CounterComponent;
2. Redux與React - 異步Action處理
有時，我們需要處理異步操作，例如從服務(wù)器獲取數(shù)據(jù)。Redux中的異步操作通常通過中間件（如Redux Thunk）來處理。以下是一個簡單的例子：
// actions.js
export const fetchData = () => {
return async (dispatch) => {
dispatch({ type: 'FETCH_DATA_REQUEST' });
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
} catch (error) {
dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
}
};
};
在React組件中，我們可以這樣使用：
// DataFetchingComponent.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions';
const DataFetchingComponent = () => {
const dispatch = useDispatch();
const data = useSelector((state) => state.data);
useEffect(() => {
dispatch(fetchData());
}, [dispatch]);
return (
<div>
{data.loading && <p>Loading...</p>}
{data.error && <p>Error: {data.error}</p>}
{data.data && <p>Data: {data.data}</p>}
</div>
);
};
export default DataFetchingComponent;
通過上述步驟，我們可以在React應(yīng)用中更靈活地提交帶有參數(shù)的Redux Actions，并處理異步操作。在接下來的部分，我們將深入研究Redux DevTools，以便更好地調(diào)試和監(jiān)控我們的Redux應(yīng)用。
六、Redux調(diào)試 - devtools
在這一部分，我們將學(xué)習(xí)如何使用Redux DevTools來調(diào)試和監(jiān)控Redux應(yīng)用的狀態(tài)變化。
1. 安裝Redux DevTools Extension
首先，確保你的瀏覽器中安裝了Redux DevTools Extension。這個瀏覽器擴展提供了一個強大的工具集，用于監(jiān)視和調(diào)試Redux應(yīng)用程序的狀態(tài)變化。
2. 集成DevTools到Redux中
在Redux的store配置中，我們可以使用composeWithDevTools函數(shù)來集成Redux DevTools。
// store.js
import { configureStore } from '@reduxjs/toolkit';
import { counterSlice } from './counterSlice';
import { composeWithDevTools } from 'redux-devtools-extension';
export const store = configureStore({
reducer: {
counter: counterSlice.reducer,
},
}, composeWithDevTools());
3. 查看和調(diào)試狀態(tài)變化
安裝并配置好Redux DevTools后，你可以打開瀏覽器的開發(fā)者工具，切換到Redux DevTools選項卡。這里你將能夠：
- 查看每個action的觸發(fā)歷史。
- 回溯到之前的狀態(tài)。
- 監(jiān)控狀態(tài)變化。
- 導(dǎo)出和導(dǎo)入狀態(tài)快照。
通過這些功能，你可以更輕松地理解應(yīng)用的狀態(tài)變化，發(fā)現(xiàn)潛在的問題，并更高效地調(diào)試Redux應(yīng)用。
通過以上步驟，你已成功集成并使用Redux DevTools來調(diào)試和監(jiān)控你的Redux應(yīng)用。在接下來的部分，我們將總結(jié)并展望未來學(xué)習(xí)的方向。
小結(jié)
本博客深入介紹了在React中使用Redux的基礎(chǔ)知識：
Redux介紹： 學(xué)習(xí)了Redux的核心概念，包括State、Action、Reducer和Store，構(gòu)建了單向、可預(yù)測的數(shù)據(jù)流架構(gòu)。
Redux快速體驗： 通過實現(xiàn)計數(shù)器應(yīng)用，快速掌握了Redux基本用法，包括定義Action、創(chuàng)建Reducer和觸發(fā)State變化。
Redux與React - 實現(xiàn)Counter： 使用React Toolkit簡化Redux集成，展示了在React組件中使用
useSelector和useDispatch管理狀態(tài)。Redux與React - 提交Action傳參： 學(xué)會了提交帶參數(shù)的Redux Actions，提供更靈活的狀態(tài)處理。同時處理了異步操作。
Redux調(diào)試 - DevTools： 集成Redux DevTools，提高調(diào)試效率，能夠輕松監(jiān)控和分析狀態(tài)變化。
通過這些步驟，你現(xiàn)在具備了在React中使用Redux進行狀態(tài)管理的基礎(chǔ)知識。繼續(xù)探索和實踐，將更熟練地應(yīng)用Redux來應(yīng)對React應(yīng)用的復(fù)雜狀態(tài)。
到此這篇關(guān)于React狀態(tài)管理的簡明指南的文章就介紹到這了,更多相關(guān)React狀態(tài)管理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react中如何對自己的組件使用setFieldsValue
react中如何對自己的組件使用setFieldsValue問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
關(guān)于 Refs ，React 官網(wǎng)講解的對于新手來說不太友好，還是自己一字一句解讀后并以代碼驗證的方式后真正理解的.2021-05-05
這篇文章主要介紹了React如何通過@craco/craco代理接口問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了React使用ref方法與場景，React支持給任意組件添加特殊屬性。ref屬性接受一個回調(diào)函數(shù)，它在組件被加載或卸載時會立即執(zhí)行2022-10-10
使用react render props實現(xiàn)倒計時的示例代碼
這篇文章主要介紹了使用react render props實現(xiàn)倒計時的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了React 元素渲染的相關(guān)資料，文中示例代碼非常詳細，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
本文主要介紹一種基于?React?Hooks?的狀態(tài)共享方案，介紹其實現(xiàn)，并總結(jié)一下使用感受，目的是在狀態(tài)管理方面提供多一種選擇方式。感興趣的小伙伴可以了解一下2021-12-12
這篇文章主要介紹了React Native 圖片查看組件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了React.cloneElement的使用詳解，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下2021-04-04
React項目中服務(wù)器端渲染SSR的實現(xiàn)與優(yōu)化詳解
在傳統(tǒng)的 React 項目里,頁面的渲染工作是在瀏覽器里完成的,而服務(wù)器端渲染（SSR）則是讓服務(wù)器先把 React 組件渲染成 HTML 字符串,再把這個 HTML 字符串發(fā)送給瀏覽器,下面我們就來看看具體實現(xiàn)方法吧2025-03-03