useReducer：React Hooks

React 中的 useReducer：透過兩個迷你專案簡化狀態管理

介紹

狀態管理是在 React 中建立動態和互動式應用程式的關鍵部分。雖然 useState 足以管理簡單狀態，但隨著應用程式的狀態變得越來越複雜，useReducer 提供了一種更強大、可預測的方法來處理它。受 Redux 的減速器模式的啟發，useReducer 允許您定義狀態轉換應如何發生以響應特定操作，使其成為具有多個複雜狀態更新的場景的理想選擇。

在本文中，我們將：

1. 詳細解釋 useReducer、其語法以及何時使用它。
2. 實作兩個小專案：
   • 具有多個操作的計數器：超越基本增量/減量的範例，展示 useReducer 如何處理多個操作類型。
   • 具有複雜狀態轉換的待辦事項清單：一款突出 useReducer 管理複雜狀態物件能力的待辦事項應用。

讓我們深入了解 useReducer 如何簡化 React 中的狀態管理！

---

理解 useReducer

什麼是 useReducer？

useReducer 是一個 React hook，專為 useState 不足的情況而設計。您不是直接更新狀態，而是指定一個減速器函數，該函數根據當前狀態和操作計算下一個狀態。這種聲明式方法可讓狀態轉換保持可預測，並允許您以集中的方式管理更複雜的狀態邏輯。

useReducer 的語法

以下是語法細分：

const [state, dispatch] = useReducer(reducer, initialState);

• reducer：定義如何根據操作更新狀態的函數。它需要兩個參數：

  • state：目前狀態。
  • action：包含操作資訊的對象，通常包括類型和可選的有效負載。

• initialState：態的起始值。

範例：使用 useReducer 的基本計數器

讓我們使用 useReducer 建立一個簡單的計數器來查看實際語法。

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
}

export default Counter;

守則解釋

1. Reducer 函數：此函數定義如何處理動作。根據操作類型（遞增或遞減），reducer 函數傳回一個新的狀態物件。
2. 調度操作：調度將一個操作傳送到reducer，reducer對其進行處理並相應地更新狀態。

---

何時使用 useReducer

useReducer 在以下情況下特別有用：

• 狀態邏輯複雜或涉及多個子值。
• 下一個狀態取決於前一個狀態。
• 多個元件需要存取reducer管理的狀態（可以將useReducer和useContext結合起來使用全域狀態）。

---

迷你項目1：多個動作的計數器

在這個專案中，我們將建立一個增強的計數器，允許多種操作（遞增、遞減、重置），以了解 useReducer 如何處理更廣泛的操作。

步驟一：定義Reducer函數

const [state, dispatch] = useReducer(reducer, initialState);

步驟2：建立計數器組件

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
}

export default Counter;

除了遞增和遞減之外，此增強型計數器現在還支援重置功能。此專案展示了 useReducer 在管理狀態更新操作方面的靈活性。

---

迷你專案 2：建立具有複雜狀態轉換的待辦事項列表

待辦事項清單應用程式強調了 useReducer 如何非常適合管理具有多個轉換的複雜狀態對象，例如新增、刪除和切換任務。

步驟一：定義Reducer

import React, { useReducer } from 'react';

function reducer(state, action) {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        case 'reset':
            return { count: 0 };
        default:
            throw new Error(`Unknown action: ${action.type}`);
    }
}

第 2 步：建立待辦事項清單元件

從 'react' 匯入 React, { useReducer, useState };

函數待辦事項清單（）{
    const [todos, 調度] = useReducer(todoReducer, []);
    const [任務，setTask] = useState('');

    const handleAdd = () =>; {
        if (task.trim()) {
            調度（{ 類型：'添加'，有效負載：任務 }）；
            設定任務(''); // 清空輸入框
        }
    };

    返回 （
        <div>
            <h2 id="待辦事項清單">待辦事項清單</h2>
            ; setTask(e.target.value)}
                placeholder="輸入新任務"
            >>
            <button onclick="{handleAdd}">新增任務</button>

            <ul>
                {todos.map(todo => (
                    <li key="{todo.id}">



<h3>
  
  
  待辦事項清單代碼說明
</h3>

<ol>
<li>
<p><strong>行動</strong>：</p>

<ul>
<li>
<strong>新增</strong>：將新任務新增至清單中，並使用唯一 ID 並將已完成狀態設為 false。 </li>
<li>
<strong>刪除</strong>：根據ID過濾掉任務來刪除它。 </li>
<li>
<strong>切換</strong>：透過切換已完成狀態將任務標記為已完成或未完成。 </li>
</ul>
</li>
<li><p><strong>將 useReducer 與動態資料結合使用</strong>：此範例展示了 useReducer 如何處理物件陣列中複雜的巢狀狀態更新，使其非常適合管理具有多個屬性的專案。 </p></li>
</ol>


<hr>

<h2>
  
  
  結論
</h2>

<p>在本文中，您學習如何有效地使用 useReducer 在 React 應用程式中進行更複雜的狀態管理。透過我們的專案：</p>
<ol>
<li>
<strong>增強型計數器</strong>示範了 useReducer 如何簡化多個基於操作的狀態更新。 </li>
<li>
<strong>待辦事項清單</strong>說明如何使用 useReducer 管理複雜的狀態對象，例如任務數組。 </li>
</ol>

<p>使用 useReducer，您可以為需要強大狀態管理的應用程式編寫更乾淨、更可預測且可維護的程式碼。嘗試這些項目，下次在 React 應用程式中遇到複雜的狀態邏輯時，請考慮使用Reducer！ </p>


          </li>
</ul>
</div>

            
        

以上是useReducer：React Hooks的詳細內容。更多資訊請關注PHP中文網其他相關文章！