ReactJS - Redux：初學者指南

你好啊，有抱負的開發者！我很高興能成為你進入ReactJS和Redux世界的引路人。作為一個教了年數計算機科學的老師，我見過無數學生在掌握這些概念時眼睛發亮。那麼，讓我們一起跳進去，創造一些奇蹟吧！

ReactJS - Redux

Redux是什麼？

在我們深入代碼之前，讓我們先了解一下Redux是什麼。想像你正在籌備一個大派對（那就是你的應用程序），你需要跟蹤所有的賓客、食物和音樂（那就是你的應用程序的状态）。Redux就像是你那個超高效的派對策劃者，將所有事情有條不紊地集中在一個地方管理。

Redux是一個狀态管理庫，它幫助你更有效地管理React應用程序中的數據。它特別適用於較大的應用程序，在這些應用程序中，组件之間傳遞數據可能會變得複雜。

Redux的核心概念

讓我們分解一下Redux的主要概念：

1. Store

Store就像一個大容器，存放了你應用程序的所有状态。它是你應用程序數據的唯一真實來源。

2. Actions

Actions就像消息，告訴store應用程序中發生了什麼。它們是普通的JavaScript對象，必須有一個type屬性。

3. Reducers

Reducers是函數，它們指定應用程序的状态如何對action做出反應。它們接受當前状态和一個action作為參數，並返回一個新的状态。

4. Dispatch

Dispatch是一個方法，它將action發送到store以更新状态。

現在，讓我們通過一些代碼示例來看看這些概念是如何運作的！

設置Redux

首先，我們需要安裝Redux和React-Redux：

npm install redux react-redux

現在，讓我們創建一個簡單的計數器應用程序來演示Redux是如何工作的。

創建Store

import { createStore } from 'redux';

// 這是我們的reducer
const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
};

// 創建store
const store = createStore(counterReducer);

在這個例子中，我們創建了一個帶有簡單計數器reducer的store。Reducer會聆聽'INCREMENT'和'DECREMENT'的action，並相應地更新状态。

定義Actions

// Action creators
const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

這是我們的action creators。它們返回action對象，我們的reducer會對其做出反應。

使用Provider组件

Provider组件使得Redux store對任何需要訪問Redux store的嵌套组件可用。

import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import counterReducer from './reducers';
import App from './App';

const store = createStore(counterReducer);

const Root = () => (
<Provider store={store}>
<App />
</Provider>
);

export default Root;

這段代碼將我們的主要App组件包裹在Provider中，為所有组件提供對store的訪問。

將组件連接到Redux

現在，讓我們創建一個使用我們Redux store的Counter组件：

import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';

const Counter = ({ count, increment, decrement }) => (
<div>
<h2>計數：{count}</h2>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);

const mapStateToProps = (state) => ({
count: state,
});

const mapDispatchToProps = {
increment,
decrement,
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

讓我們來分解一下：

我們從react-redux導入connect，它讓我們的组件能夠連接到Redux store。
mapStateToProps告訴Redux如何將state映射到我們组件的props。
mapDispatchToProps讓我們將action creators映射到props。
connect包裹我們的组件，將state和action creators作為props注入。

Redux API方法

這裡是一些重要的Redux API方法的表格：

方法	描述
createStore(reducer, [preloadedState], [enhancer])	創建一個Redux store
combineReducers(reducers)	將多個reducers合並為一個減少函數
applyMiddleware(...middlewares)	將中間件應用到Redux store的dispatch方法
bindActionCreators(actionCreators, dispatch)	將一個對象的值作為action creators轉換為一個對象，對象中的每個key都包裹了一個dispatch調用

結論

好了，我們已經介紹了Redux的基本知識，從理解其核心概念到在React應用程序中實現它。記住，Redux可能一開始看起來有點複雜，但它就像學騎自行車一樣 - 一旦你掌握了它，你就會想知道沒有它你怎麼過來的！

在你繼續你的旅程時，你會發現Redux更多進階的功能，比如中間件和異步操作。但現在，給自己一個鼓勵 - 你已經邁入了狀態管理更廣闊的世界！

持續編程，持續學習，最重要的是，保持樂趣！直到下次見，快樂Redux！

Credits: Image by storyset