隨著 Web 應用程式變得越來越複雜，管理狀態變得越來越具有挑戰性。如果您發現自己陷入了不可預測的狀態變化和難以追蹤的資料流的網路中，那麼您並不孤單。這就是 Redux 發揮救星作用的地方。
Redux 是 JavaScript 應用程式的狀態管理函式庫，以其有效性而聞名，尤其是與 React 一起使用時。透過提供可預測且集中的方式來管理應用程式狀態，Redux 簡化了追蹤資料如何隨時間變化以及應用程式的不同部分如何相互互動的過程。
但是為什麼 Redux 是必要的呢？在任何大型應用程式中，狀態變更都可能發生在多個位置，因此很難找出特定資料在何處以及如何變更。調試和維護此類應用程式可能會成為一場噩夢。 Redux 透過將整個應用程式的狀態儲存在一個稱為儲存的集中位置來解決這些挑戰。這種集中式方法不僅簡化了狀態管理，還增強了應用程式的可預測性和可測試性。
本指南將帶您詳細了解 Redux，從理解其核心概念到在 React 應用程式中設定和使用它。閱讀本文後，您將牢牢掌握 Redux，並有能力將其應用到您的專案中。
要真正理解 Redux，必須熟悉三個基本概念：store、action 和 reducer。讓我們更深入地了解每個概念。
Redux 的核心是存儲，它是一個集中存儲庫，保存應用程式的整個狀態。商店是應用程式資料的唯一真實來源。無論您的應用程式變得有多大或多複雜，所有狀態都儲存在一個位置，從而更易於管理和調試。
將商店想像成一個巨大的 JavaScript 對象，其中包含應用程式運行所需的所有資訊。無論是使用者資料、UI 狀態或伺服器回應，所有內容都儲存在該物件中。這種集中式方法與在各個元件內本地管理狀態的傳統方法形成鮮明對比，這可能會導致追蹤狀態變更的不一致和困難。
Redux 中的儲存空間是不可變的，這意味著一旦設定了狀態，就無法直接變更。相反，只要需要更改，就會建立一個新狀態。這種不變性對於維持應用程式的可預測性至關重要，因為它確保每個狀態變更都是有意且可追蹤的。
Redux 中的操作是描述應用程式中的事件或更改的純 JavaScript 物件。它們就像傳遞有關應用程式中發生的情況的訊息的信使。每個操作都有一個定義操作性質的類型屬性，以及一個可選的有效負載屬性，其中包含與該操作相關的任何其他資料。
例如，在待辦事項清單應用程式中，操作可能表示新增新的待辦事項、完成現有項目或刪除項目。每個操作都有一個唯一的類型，例如 ADD_TODO、TOGGLE_TODO 或 DELETE_TODO，並且可能包含其他數據，例如待辦事項的 ID 或文字。
操作被分派到存儲，並由減速器處理（我們將在接下來討論）。透過清楚定義應用程式中發生的情況，操作有助於保持清晰且易於理解的資料變更流。
Reducers 是 Redux 中的純函數，定義應用程式的狀態應如何回應操作而改變。它們以當前狀態和操作作為參數並傳回一個新狀態。術語「純函數」意味著reducer的輸出僅取決於其輸入（當前狀態和操作），並且不會產生任何副作用，例如修改外部變數或執行非同步操作。
在 Redux 中，reducers 負責實際的狀態更新。當分派一個操作時，Redux 將目前狀態和操作傳遞給適當的減速器，然後計算並傳回新狀態。這個過程確保狀態以可預測和可追蹤的方式發生變化。
例如，待辦事項清單應用程式的減速器可能如下所示：
function todoReducer(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload];
case 'TOGGLE_TODO':
return state.map(todo =>
todo.id === action.payload.id
? { ...todo, completed: !todo.completed }
: todo
);
default:
return state;
}
}
在此範例中，todoReducer 處理兩種類型的操作：ADD_TODO 和 TOGGLE_TODO。根據操作類型，它可以為狀態新增新的待辦事項或切換現有專案的已完成狀態。減速器總是傳回一個新的狀態對象，確保原始狀態保持不變。
現在我們已經介紹了 Redux 的核心概念，是時候看看它們如何在實際應用程式中結合在一起了。在本節中，我們將逐步介紹在簡單的 React 應用程式中設定和使用 Redux 的過程。
使用 Redux 的第一步是安裝必要的軟體包。 Redux 本身是一個獨立的函式庫，但與 React 一起使用時，您還需要安裝react-redux，這是一個提供將 Redux 與 React 元件整合的綁定的套件。
要安裝 Redux 和 React-Redux，請開啟終端機並在專案目錄中執行以下命令：
npm install redux react-redux
此指令會安裝 redux 和 react-redux，我們將使用它們將 React 元件連接到 Redux 儲存。
安裝 Redux 後，下一步就是建立儲存。儲存保存應用程式的狀態並提供用於調度操作和訂閱狀態變更的方法。
在此範例中，我們將為簡單的待辦事項清單應用程式建立一個商店。首先建立一個處理狀態變更的減速器函數：
import { createStore } from 'redux';
// This is our reducer function
function todoReducer(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload];
case 'TOGGLE_TODO':
return state.map(todo =>
todo.id === action.payload.id
? { ...todo, completed: !todo.completed }
: todo
);
default:
return state;
}
}
// Create the store
const store = createStore(todoReducer);
在此程式碼中，todoReducer 函數處理兩種類型的操作：ADD_TODO 用於新增新的待辦事項，TOGGLE_TODO 用於切換專案的完成狀態。 Redux 中的 createStore 函數用於建立存儲，並傳入 todoReducer 作為參數。
動作在 Redux 中至關重要，因為它們描述了應用程式中發生的事情。但是，每次想要分派操作時手動建立操作物件可能會變得很麻煩。這就是動作創建者發揮作用的地方。動作創建者是傳回動作物件的函數。
讓我們定義一個動作建立器來新增待辦事項：
function addTodo(text) {
return {
type: 'ADD_TODO',
payload: { id: Date.now(), text, completed: false }
};
}
addTodo 函數接受一個文字參數並傳回一個類型為 ADD_TODO 的操作物件和包含待辦事項資料的有效負載。這個動作創建器簡化了分派動作的過程，使程式碼更具可讀性和可維護性。
您也可以定義其他操作建立者，例如toggleTodo，用於切換待辦事項的完成狀態：
function toggleTodo(id) {
return {
type: 'TOGGLE_TODO',
payload: { id }
};
}
儲存和操作就位後，您現在可以調度操作來更新狀態。分派一個動作是你通知 Redux 應用程式中發生了一些事情，觸發適當的減速器來更新狀態的方式。
以下是如何排程操作來新增和切換待辦事項：
store.dispatch(addTodo('Learn Redux'));
store.dispatch(addTodo('Build an app'));
store.dispatch(toggleTodo(1621234567890));
當您分派 addTodo 操作時，Redux 會使用目前狀態和操作呼叫 todoReducer，reducer 將傳回一個包含新增的待辦事項的新狀態。同樣，當您調度toggleTodo操作時，reducer會更新指定待辦事項的完成狀態。
要讀取應用程式的目前狀態，可以使用商店提供的 getState 方法。此方法傳回儲存在 Redux 儲存中的整個狀態物件：
console.log(store.getState());
// Output: [{ id: 1621234567890, text: 'Learn Redux', completed: true },
// { id: 1621234567891, text: 'Build an app', completed: false }]
除了讀取狀態之外，還可以使用 subscribe 方法訂閱狀態變化。此方法可讓您在狀態變更時執行回呼函數，這對於更新 UI 或執行其他副作用以回應狀態更新非常有用：
const unsubscribe = store.subscribe(() => {
console.log('State updated:', store.getState());
});
訂閱完狀態變更後，可以透過呼叫 subscribe 傳回的函數來取消訂閱：
unsubscribe();
要將 Redux 與 React 集成，您需要將 React 元件連接到 Redux 儲存。這就是react-redux套件發揮作用的地方，它提供了Provider、useSelector和useDispatch實用程式。
首先將整個應用程式包裝在 Provider 元件中，並將 Redux 儲存作為 prop 傳遞。這使得 Redux 儲存可用於 React 應用程式中的所有元件：
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import App from './App';
import todoReducer from './reducers';
// Create the Redux store
const store = createStore(todoReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
接下來，使用 useSelector 和 useDispatch 掛鉤將您的元件連接到 Redux 儲存。 useSelector 允許您存取狀態，而 useDispatch 允許您分派操作：
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodo, toggleTodo } from './actions';
function TodoList() {
const todos = useSelector(state => state);
const dispatch = useDispatch();
const handleAddTodo = (text) => {
dispatch(addTodo(text));
};
const handleToggleTodo = (id) => {
dispatch(toggleTodo(id));
};
return (
<div>
<button onClick={() => handleAddTodo('New Todo')}>Add Todo</button>
<ul>
{todos.map(todo => (
<li
key={todo.id}
onClick={() => handleToggleTodo(todo.id)}
style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
>
{todo.text}
</li>
))}
</ul>
</div>
);
}
export default TodoList;
In this example, the TodoList component displays a list of todo items, with the ability to add new items and toggle their completion status. The useSelector hook retrieves the state from the Redux store, while the useDispatch hook allows the component to dispatch actions.
By connecting your React components to Redux in this way, you can ensure that your application's state is managed consistently and predictably.
While Redux is a powerful tool for managing state in complex applications, it also comes with its own set of best practices and potential pitfalls. Understanding these will help you avoid common mistakes and make the most of Redux in your projects.
In this comprehensive guide, we've covered the fundamentals of Redux, from its core concepts to setting up and using it in a simple React application. Redux is a powerful tool for managing state in complex applications, but it also comes with its own learning curve and best practices.
透過了解儲存、操作和化簡器，您可以控制應用程式的狀態並確保其行為可預測且一致。透過提供的逐步指南，您現在應該能夠在自己的專案中設定 Redux 並開始像專業人士一樣管理狀態。
但是，Redux 是一個廣闊的主題，具有許多高級功能和用例。為了加深您的理解，請考慮探索以下內容：
請記住，掌握 Redux 需要時間和練習。你使用它的次數越多，你就會變得越舒服。不斷嘗試，不斷學習。
以上是了解 Redux：初學者綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
