Redux 是 JavaScript 的一種開源狀態管理 (state management) 工具，尤其在處理複雜狀態的情況下，Redux 提供了一種有效和一致的解決方案。本篇文章將導讀者認識 Redux，並提供實戰教學來深入了解 Redux 的運作方式。
Redux 是什麼？
Redux 是一個用於管理和更新應用程式狀態的 JavaScript 工具。它的主要目標是使狀態更新可預測和簡單。Redux 有三個基本原則：
- 單一來源原則：整個應用程式的狀態儲存在一個單一的 JavaScript 物件中。
- 狀態是唯讀的：唯一改變狀態的方法是發送（dispatch）一個行動（action）。
- 純函數用於處理狀態變化：行動被傳遞給純函數（稱為 reducer）以更新狀態。
JavaScript 全端開發課程，16 週進度班帶你半年轉職工程師
什麼是 State Container 狀態容器
State Container（狀態容器）是一個用於儲存和管理應用程式狀態的軟體設計模式。在前端開發中，狀態容器通常用於存儲與應用程式相關的所有數據，例如用戶輸入的表單數據、應用程式的配置設置、用戶操作的歷史記錄等。狀態容器使開發人員能夠在應用程式的不同組件之間共享和操作狀態數據，從而提高應用程式的一致性和效率。
Redux 解決什麼問題？
Redux 是一個廣泛使用的 JavaScript 狀態容器庫，它提供了一種集中式的方式來管理應用程式狀態。使用 Redux，開發人員可以將應用程式狀態存儲在一個單一的狀態樹中，然後通過行為（actions）和純函數（reducers）來更新這些狀態。這種方法使得應用程式的狀態管理變得更加可預測、可追蹤和易於除錯。
當我們在開發大型和複雜的前端應用程式時，會遇到一些特定的問題，Redux 正是為了解決這些問題而被創建的。以下是 Redux 能解決的一些關鍵問題：
- 全局狀態管理：當應用程式變得越來越大，管理各組件之間的共享狀態變得越來越困難。Redux 提供了一個中央存儲庫來保存整個應用程式的狀態，這讓全局狀態的管理變得更容易。
- 狀態一致性：在多組件和大型應用程式中，維護狀態一致性是一個挑戰。Redux 通過單一來源真理的原則，確保了在任何時候，狀態都是一致的。
- 狀態更新的可預測性：Redux 使用純函數（稱為 reducers）來處理狀態的更新。這意味著對於相同的輸入，reducers 始終返回相同的輸出，這讓狀態更新變得可預測。
- 狀態變更的追蹤和理解：Redux 的另一個重要特性是，每一次狀態的改變都會通過一個行動（action）來觸發。這使得開發者能夠輕易地追蹤到狀態何時、如何改變。
- 測試和除錯：由於 Redux 的設計和結構，使得測試和除錯變得更加容易。Redux 還有內建的開發者工具，可以讓你追蹤狀態變化並理解狀態是如何改變的。
因此，Redux 解決的問題主要集中在大型、複雜的前端應用程式的狀態管理上。它提供了一種統一、預測和有效的方式來管理和更新應用程式的狀態。
使用 Redux 的好處：
- 單一來源真理（Single Source of Truth）：Redux 提供一個單一且可信賴的狀態儲存空間，讓開發者可以清楚了解整個應用程式的狀態。這可以減少錯誤並提高應用程式的效能。
- 可預測性（Predictability）：Redux 中的狀態更新是以明確的方式進行的，這有助於開發者理解應用程式的行為。狀態的變化是可追蹤的，並且以相同的輸入，總是會產生相同的輸出。
- 易於除錯和測試（Ease of Debugging and Testing）：由於 Redux 的狀態更新是明確和可預測的，因此在進行除錯和測試時會更容易。Redux 還允許你在開發工具中直接查看狀態的變化，這使得除錯更為直觀。
- 應用程式狀態持久化（Application State Persistence）：Redux 可以輕鬆地實現應用程式狀態的持久化，這對於需要保持用戶的應用程式狀態或者需要在頁面重新載入時保持狀態的應用程式非常有用。
- 社區支援和擴展性（Community Support and Extensibility）：Redux 有一個活躍的開發者社區，並有許多可用的中間件和工具來擴展其功能。
Redux 的實戰教學
讓我們一起來創建一個簡單的 Redux 應用程式。我們將創建一個管理使用者資訊的應用程式。以下是步驟：
安裝 Redux
首先，我們需要安裝 Redux。在您的項目根目錄中，運行以下命令：
npm install redux創建 Redux Store
創建一個新的 JavaScript 檔案 store.js，並在其中創建 Redux store：
import { createStore } from 'redux';
const initialState = {
user: null
};
function userReducer(state = initialState, action) {
switch (action.type) {
case 'SET_USER':
return { ...state, user: action.user };
default:
return state;
}
}
const store = createStore(userReducer);
export default store;使用 Redux Store
現在我們有了 Redux store，我們可以使用它來管理我們的應用程式狀態。在我們的組件中，我們可以使用 store.getState() 獲取當前狀態，使用 store.dispatch() 發送行動：
import store from './store';
// 獲取當前使用者
const currentUser = store.getState().user;
// 設置新的使用者
store.dispatch({ type: 'SET_USER', user: { name: 'John Doe' } });
// 獲取更新後的使用者
const updatedUser = store.getState().user;
console.log(updatedUser); // { name: 'John Doe' }
這就是 Redux 的基本使用方式。但在實際的應用程式中，我們通常會使用一些工具和函式庫來幫助我們更有效地使用 Redux。例如，我們可以使用 react-redux 來將我們的 React 組件連接到 Redux store。
使用 react-redux 連接 Redux 和 React
react-redux 是 Redux 的官方 React 綁定庫。它讓你的 React 組件可以更容易地從 Redux store 讀取狀態，並發送行動更新狀態。讓我們來看看如何使用它：
首先，安裝 react-redux：
npm install react-redux
然後，我們需要用 Provider 組件包裹我們的應用程式，並將我們的 Redux store 傳遞給它：
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')
);
接下來，我們可以使用 connect 函式來連接我們的 React 組件和 Redux store。例如，我們可以創建一個 User 組件來顯示當前使用者：
import React from 'react';
import { connect } from 'react-redux';
function User({ user }) {
return <div>Current user: {user.name}</div>;
}
const mapStateToProps = (state) => ({
user: state.user
});
export default connect(mapStateToProps)(User);
在這個組件中，mapStateToProps 函數將 Redux store 的狀態映射到我們的組件的 props。然後，connect 函式將這個映射應用到我們的組件，並返回一個新的連接後的組件。
這就是 Redux 的基本介紹和實戰教學。希望你可以從中獲得一些關於 Redux 的知識，並能在你的項目中運用它。
