modules文件夾之下的counterStore.js

使用 Redux Toolkit 中的 createSlice 方法來定義一個 Redux 的狀態(tài)管理模塊。下面詳細解釋其各個部分的功能：

1. 導入 createSlice

import { createSlice } from "@reduxjs/toolkit";

createSlice 是 Redux Toolkit 提供的一個函數(shù)，用于簡化 Redux 的狀態(tài)管理代碼。

它可以同時生成狀態(tài)（state）、操作函數(shù)（actions）和 reducer 函數(shù)。

2. 定義 counterStore

const counterStore = createSlice({
    name: 'counter',
    initialState: {
        count: 0
    },
    reducers: {
        increment(state) {
            state.count++
        },
        decrement(state) {
            state.count--
        }
    }
})

name 屬性

定義這段狀態(tài)的名字，作為 action 類型的前綴。

例如，生成的 action 類型可能是 counter/increment 和 counter/decrement。

initialState 屬性

定義了狀態(tài)的初始值：

initialState: {
    count: 0
}

表示這個模塊管理的狀態(tài)是一個包含 count 屬性的對象，初始值為 0。

reducers 屬性

定義了狀態(tài)的修改邏輯。

每個函數(shù)的參數(shù)如下：

• state：當前模塊的狀態(tài)。
• action：觸發(fā)該函數(shù)時的附加信息（如 payload）。

在這里，定義了兩個 reducer：

1.increment：

• 增加 count 的值。
• 使用了 Immer 的特性，可以直接修改狀態(tài)對象的屬性，而不需要返回一個新的狀態(tài)對象。

2.decrement：

減少 count 的值。

3. 解構(gòu) actions

const { increment, decrement } = counterStore.actions;

createSlice 會自動根據(jù) reducers 中定義的函數(shù)生成對應(yīng)的 action creators。

counterStore.actions 是一個包含 increment 和 decrement 的對象。

通過解構(gòu)，將兩個 action creator 分別賦值給 increment 和 decrement。

示例使用：

dispatch(increment()); // 觸發(fā) increment action
dispatch(decrement()); // 觸發(fā) decrement action

4. 定義 reducer

const counterReducer = counterStore.reducer;

createSlice 生成的 reducer 用于注冊到 Redux 的 store 中，處理對應(yīng)模塊的狀態(tài)更新。

這里將生成的 reducer 賦值給 counterReducer。

5. 導出 actions 和 reducer

export { increment, decrement };
export default counterReducer;

導出 increment 和 decrement，以便在其他地方觸發(fā)這些 actions。

默認導出 counterReducer，用于注冊到 Redux store 中。

總結(jié)

這段代碼定義了一個簡單的計數(shù)器模塊，包含以下功能：

初始狀態(tài)：{ count: 0 }

兩個操作：

• increment：將 count 加 1。
• decrement：將 count 減 1。

自動生成的部分：

• actions：用于觸發(fā)狀態(tài)更新。
• reducer：處理狀態(tài)更新邏輯。

它的作用是將計數(shù)器狀態(tài)管理封裝為一個獨立模塊，方便集成到 Redux 的全局狀態(tài)中。

store文件夾之下的index.js

使用 Redux Toolkit 配置 Redux Store 的基本結(jié)構(gòu)，并將 counterStore 模塊集成到 Redux Store 中。以下是詳細解析：

1. 導入 configureStore

import { configureStore } from "@reduxjs/toolkit";

configureStore 是 Redux Toolkit 提供的一個函數(shù)，用于簡化創(chuàng)建 Redux Store 的過程。

相比傳統(tǒng)的 createStore，configureStore：

自動集成了 Redux DevTools 擴展。

自動配置了 Redux 中間件（如 redux-thunk）。

支持多個 reducer 的組合。

提供更簡潔的配置方式。

2. 導入 counterReducer

import counterReducer from './modules/counterStore';

從 ./modules/counterStore 文件中導入之前定義的 counterReducer。

counterReducer 是 counterStore 中通過 createSlice 創(chuàng)建的 reducer，用于管理 counter 狀態(tài)。

3. 配置 Store

const store = configureStore({
    reducer: {
        counter: counterReducer
    }
});

configureStore 的參數(shù)

接收一個配置對象，用于定義 Store 的行為。

常見配置項：

reducer：

定義所有模塊的 reducer。

支持對象形式組合多個 reducer，類似于傳統(tǒng) Redux 的 combineReducers。

在此例中：

reducer: {
    counter: counterReducer
}

將 counterReducer 綁定到 counter 鍵上，意味著 Redux 的狀態(tài)結(jié)構(gòu)如下：

{
    counter: {
        count: 0
    }
}

4. 導出 Store

export default store;

將創(chuàng)建的 store 導出，以便在應(yīng)用中使用，例如通過 Provider 將 Store 綁定到 React 應(yīng)用。

5. Redux 狀態(tài)樹

根據(jù)配置，最終的 Redux 狀態(tài)樹的結(jié)構(gòu)如下：

{
    counter: {
        count: 0
    }
}

counter 是狀態(tài)的命名空間，對應(yīng) counterReducer。

count 是 counter 模塊中的一個狀態(tài)屬性。

總結(jié)

這段代碼是 Redux Toolkit 的典型使用方式：

• 使用 configureStore 創(chuàng)建 Redux Store。
• 將 counterReducer 綁定到 counter 命名空間。
• 導出的 store 可被 React 應(yīng)用通過 Provider 使用，從而管理 counter 狀態(tài)。
• 擴展其他模塊時，依然保持代碼結(jié)構(gòu)清晰易維護。

src文件夾之下的index.js

這段代碼展示了一個典型的 React 項目入口文件，使用 React、React Redux 和 Redux Toolkit 來設(shè)置應(yīng)用。以下是逐部分的詳細解析：

1. 導入 React 和相關(guān)庫

import React from 'react';
import ReactDOM from 'react-dom/client';

React：React 的核心庫，用于構(gòu)建組件和用戶界面。

ReactDOM：React 的 DOM 渲染庫，用于將 React 組件渲染到 DOM 中。

ReactDOM.createRoot：React 18 新的渲染入口方法，支持并發(fā)特性。

2. 導入樣式和模塊

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store';
import { Provider } from 'react-redux';

• ./index.css：引入全局樣式文件，用于定義應(yīng)用的基礎(chǔ)樣式。
• App：主應(yīng)用組件，是整個 React 應(yīng)用的根組件。
• reportWebVitals：性能測量工具，用于監(jiān)控和優(yōu)化 React 應(yīng)用的性能（可選）。
• store：導入 Redux Store，用于管理應(yīng)用的全局狀態(tài)。
• Provider：來自 react-redux，用于將 Redux Store 注入到整個 React 組件樹中。

3. 創(chuàng)建根節(jié)點

const root = ReactDOM.createRoot(document.getElementById('root'));

document.getElementById('root')：選擇 HTML 中的 id="root" 的 DOM 節(jié)點，作為 React 應(yīng)用的掛載點。

ReactDOM.createRoot：在 React 18 中，使用該方法創(chuàng)建渲染根，支持并發(fā)渲染特性。

4. 渲染組件樹

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

React.StrictMode

React 的調(diào)試工具組件，運行時會對代碼進行額外檢查：

• 檢查生命周期方法的使用是否符合規(guī)范。
• 提醒可能存在的潛在問題（例如不安全的 API）。
• 在開發(fā)模式下啟用，不會影響生產(chǎn)環(huán)境的性能。

Provider

Redux 提供的上下文組件，作用是：

• 將 store 傳遞給組件樹中的所有子組件。
• 任何使用 useSelector 或 useDispatch 的子組件都可以訪問 Redux 的狀態(tài)或分發(fā)動作。
• 必須傳入 store 屬性，即創(chuàng)建好的 Redux Store 實例。

App

• React 應(yīng)用的根組件，表示整個應(yīng)用的組件樹結(jié)構(gòu)。
• App 中的組件可以通過 Redux 訪問全局狀態(tài)。

5. 性能監(jiān)控

reportWebVitals();

reportWebVitals 是由 create-react-app 提供的工具，用于監(jiān)控 React 應(yīng)用的性能指標。

參數(shù)為一個回調(diào)函數(shù)，用于記錄性能數(shù)據(jù)：

reportWebVitals(console.log);

例如，記錄頁面的加載時間、首次內(nèi)容繪制時間等。

或者，將數(shù)據(jù)發(fā)送到分析服務(wù)端：

reportWebVitals((metric) => {
  sendToAnalytics(metric);
});

6. 應(yīng)用整體工作流程

HTML 中定義了一個 <div id="root"></div> 容器，作為 React 應(yīng)用的掛載點。

ReactDOM.createRoot 創(chuàng)建 React 的根渲染器，掛載到 #root 容器中。

使用 <Provider> 將 Redux Store 注入到整個應(yīng)用中，確保子組件可以通過 Redux 管理狀態(tài)。

渲染主組件 <App />，構(gòu)建用戶界面。

如果啟用了性能監(jiān)控，reportWebVitals 會捕獲應(yīng)用的性能數(shù)據(jù)。

7. 代碼結(jié)構(gòu)的意義

模塊化設(shè)計：將樣式、主組件、狀態(tài)管理和性能監(jiān)控分離，清晰明了，易于擴展。

React + Redux：結(jié)合 Provider 實現(xiàn)全局狀態(tài)管理，適用于大型應(yīng)用。

React.StrictMode：幫助開發(fā)者捕捉潛在問題，提高代碼質(zhì)量。

總結(jié)

這段代碼完成了 React 應(yīng)用的基礎(chǔ)配置，將 Redux Store 集成到 React 應(yīng)用中，并提供性能監(jiān)控功能，是一個標準的現(xiàn)代 React 項目入口文件結(jié)構(gòu)。

src文件夾之下的App.js

這段代碼展示了一個使用 React 和 Redux 的示例，通過 Redux 管理計數(shù)器的狀態(tài)，并在界面上通過按鈕實現(xiàn)加減操作。以下是詳細解析：

1. 導入 useDispatch 和 useSelector

import { useDispatch, useSelector } from "react-redux";
import { increment, decrement } from "./store/modules/counterStore";

useSelector：

React-Redux 提供的一個 Hook，用于從 Redux Store 中選擇狀態(tài)。

參數(shù)是一個回調(diào)函數(shù)，回調(diào)的參數(shù) state 是 Redux 的整個狀態(tài)樹，可以從中提取需要的部分狀態(tài)。

useDispatch：

React-Redux 提供的另一個 Hook，用于分發(fā)（dispatch）Redux 的 action。

返回一個 dispatch 函數(shù)，調(diào)用時會觸發(fā)對應(yīng)的 reducer 更新狀態(tài)。

increment 和 decrement：

從 counterStore 導入的 action，用于更新計數(shù)器狀態(tài)。

2. 定義 App 組件

function App() {
  const { count } = useSelector(state => state.counter);
  const dispatch = useDispatch();
  ...
}

useSelector 使用

useSelector(state => state.counter)：

從 Redux 的狀態(tài)樹中選擇 counter 模塊的狀態(tài)。

state.counter 對應(yīng) Redux Store 中 counter 的狀態(tài)：

{
  count: 0
}

解構(gòu)獲取 count 值。

useDispatch 使用

useDispatch()：

獲取 dispatch 函數(shù)。

該函數(shù)可用于分發(fā)（dispatch）action，觸發(fā) Redux 的狀態(tài)更新。

3. 組件的渲染邏輯

return (
  <div className="App">
    <button onClick={()=>dispatch(decrement())}>-</button>
    {count}
    <button onClick={()=>dispatch(increment())}>+</button>
  </div>
);

按鈕的邏輯

減號按鈕

<button onClick={()=>dispatch(decrement())}>-</button>

點擊時調(diào)用 dispatch(decrement())：

decrement() 是 counterStore 中定義的 action。

觸發(fā) counterStore 的 decrement reducer，減少 count 值。

狀態(tài)更新后，React 組件會重新渲染，count 的最新值顯示在頁面上。

加號按鈕

<button onClick={()=>dispatch(increment())}>+</button>

點擊時調(diào)用 dispatch(increment())：

increment() 是 counterStore 中定義的 action。

觸發(fā) counterStore 的 increment reducer，增加 count 值。

狀態(tài)更新后，React 組件重新渲染，顯示最新的 count 值。

顯示當前計數(shù)

{count}

渲染 count 值，表示當前計數(shù)器的狀態(tài)。

4. Redux 狀態(tài)和組件交互的工作流程

獲取狀態(tài)：

• 使用 useSelector 從 Redux Store 中提取狀態(tài)。
• 組件中的 {count} 自動更新以反映最新狀態(tài)。

更新狀態(tài)：

• 用戶點擊按鈕，觸發(fā) onClick 事件：
• dispatch(decrement()) 或 dispatch(increment()) 調(diào)用。
• 分發(fā)的 action 觸發(fā) Redux 的 reducer 更新狀態(tài)。
• 更新后的狀態(tài)通過 useSelector 獲取，導致 React 組件重新渲染。

5. 結(jié)合 Redux Store 的功能

假設(shè) Redux Store 的狀態(tài)結(jié)構(gòu)如下：

{
  counter: {
    count: 0
  }
}

初始狀態(tài)：count = 0

點擊 加號按鈕：

• dispatch(increment())
• count++，狀態(tài)變?yōu)?{ count: 1 }

點擊 減號按鈕：

• dispatch(decrement())
• count--，狀態(tài)變?yōu)?{ count: 0 }

6. 代碼的意義

展示了 React 和 Redux 的集成：

使用 useSelector 提取狀態(tài)。

使用 useDispatch 分發(fā) action。

通過狀態(tài)管理實現(xiàn)組件的動態(tài)交互，避免直接管理狀態(tài)的復雜性。

模塊化的 Redux Store 設(shè)計使代碼易擴展，例如增加其他狀態(tài)模塊或功能。

7. 擴展建議

添加初始化狀態(tài)：可以通過 Redux 提供初始狀態(tài)的功能，使 count 的初始值可配置。

增強樣式：引入 CSS 或組件庫美化按鈕和布局。

多功能性：添加更多操作，比如重置計數(shù)、設(shè)置計數(shù)的步長。

總結(jié)

這段代碼是一個簡單但完整的 React + Redux 示例，通過按鈕實現(xiàn)全局狀態(tài) count 的加減操作。它展示了 Redux 狀態(tài)管理的核心用法，包括 useSelector 和 useDispatch，以及 Redux 和 React 的無縫集成。

到此這篇關(guān)于使用react和redux構(gòu)建一個簡單的計數(shù)器的文章就介紹到這了,更多相關(guān)react redux構(gòu)建計數(shù)器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論