一、Redux介紹

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

為什么要使用Redux？

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

二、Redux快速體驗(yàn)

在這一部分，我們將通過兩個(gè)簡單的步驟來快速體驗(yàn)Redux的基本概念。

1. 實(shí)現(xiàn)計(jì)數(shù)器

首先，讓我們創(chuàng)建一個(gè)簡單的計(jì)數(shù)器應(yīng)用程序，以便更好地理解Redux的基本概念。我們將展示如何設(shè)置Redux，創(chuàng)建一個(gè)簡單的store，并通過actions和reducers實(shí)現(xiàn)一個(gè)計(jì)數(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)建了一個(gè)Redux store、定義了action和reducer，并通過dispatch觸發(fā)了state的變化。

2. Redux數(shù)據(jù)流架構(gòu)

Redux的數(shù)據(jù)流架構(gòu)是其核心概念之一。以下是一個(gè)簡單的表格，描述了Redux中的state、action和reducer三個(gè)概念：

理解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)境準(zhǔn)備

Redux雖然是一個(gè)框架無關(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）- 官方推薦編寫Redux邏輯的方式，是一套工具的集合集，簡化書寫方式

• react-redux - 用來 鏈接 Redux 和 React組件 的中間件

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

• 使用 CRA 快速創(chuàng)建 React 項(xiàng)目

npx create-react-app react-redux 

• 安裝配套工具

npm i @reduxjs/toolkit  react-redux 

• 啟動(dòng)項(xiàng)目

npm run start 

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

• 通常集中狀態(tài)管理的部分都會(huì)單獨(dú)創(chuàng)建一個(gè)單獨(dú)的 store 目錄

• 應(yīng)用通常會(huì)有很多個(gè)子store模塊，所以創(chuàng)建一個(gè) modules 目錄，在內(nèi)部編寫業(yè)務(wù)分類的子store

• store中的入口文件 index.js 的作用是組合modules中所有的子模塊，并導(dǎo)出store

四、Redux與React - 實(shí)現(xiàn)Counter

在這一部分，我們將詳細(xì)介紹如何在React應(yīng)用中實(shí)現(xiàn)一個(gè)基本的計(jì)數(shù)器功能，通過Redux來管理狀態(tài)。

1. 整體路徑熟悉

首先，讓我們熟悉整體的路徑。在React中，我們將使用Redux來管理應(yīng)用的狀態(tài)，而計(jì)數(shù)器將作為一個(gè)簡單的示例，幫助我們理解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)用中實(shí)現(xiàn)了一個(gè)基本的計(jì)數(shù)器，并通過Redux來管理其狀態(tài)。在接下來的部分，我們將進(jìn)一步探討Redux與React的其他集成方式以及更復(fù)雜的應(yīng)用場景。

五、Redux與React - 提交Action傳參

在這一部分，我們將學(xué)習(xí)如何在React應(yīng)用中提交帶有參數(shù)的Redux Action，以便更靈活地處理不同的情境。

1. 提交帶有參數(shù)的Action

Redux Actions可以攜帶參數(shù)，允許我們在不同的場景下發(fā)送不同的信息。以下是一個(gè)簡單的例子，展示如何提交帶有參數(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處理

有時(shí)，我們需要處理異步操作，例如從服務(wù)器獲取數(shù)據(jù)。Redux中的異步操作通常通過中間件（如Redux Thunk）來處理。以下是一個(gè)簡單的例子：

// 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。這個(gè)瀏覽器擴(kuò)展提供了一個(gè)強(qiáng)大的工具集，用于監(jiān)視和調(diào)試Redux應(yīng)用程序的狀態(tài)變化。

• Redux DevTools Extension - Chrome
• Redux DevTools Extension - Firefox

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選項(xiàng)卡。這里你將能夠：

• 查看每個(gè)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快速體驗(yàn)： 通過實(shí)現(xiàn)計(jì)數(shù)器應(yīng)用，快速掌握了Redux基本用法，包括定義Action、創(chuàng)建Reducer和觸發(fā)State變化。

• Redux與React - 實(shí)現(xiàn)Counter： 使用React Toolkit簡化Redux集成，展示了在React組件中使用useSelector和useDispatch管理狀態(tài)。

• Redux與React - 提交Action傳參： 學(xué)會(huì)了提交帶參數(shù)的Redux Actions，提供更靈活的狀態(tài)處理。同時(shí)處理了異步操作。

• Redux調(diào)試 - DevTools： 集成Redux DevTools，提高調(diào)試效率，能夠輕松監(jiān)控和分析狀態(tài)變化。

通過這些步驟，你現(xiàn)在具備了在React中使用Redux進(jìn)行狀態(tài)管理的基礎(chǔ)知識。繼續(xù)探索和實(shí)踐，將更熟練地應(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)文章希望大家以后多多支持腳本之家！

最新評論