前兩天介紹了 Context 這個 React 內建的狀態管理 api ，今天想來介紹一下同樣是狀態管理工具的 Redux。

Redux 是一個第三方的套件，跟 Context 相同，都是狀態管理工具，用法與 Context 有異曲同工之妙，不過 Redux 架構又稍微更大了一點，屬於適合較大專案的管理工具。

今天來介紹一下 redux 的概念，以及怎麼設定好 redux。

redux 的概念

redux 主要是為了因應程式架構變大，需要管理許多資料、state，為了能更好的管理state而出現了 redux 。
redux 符合 Meta 公司所提出的 Flux 架構：

當有 action 觸發，需要改變資料或畫面時，會讓 dispatcher 分派指令給 store（資料），在進而改變 view ( 畫面 )，如果又觸發什麼指令，仍然需要經過 dispatcher 派發指令，呈現單一資料流。

而 redux 的架構符合 Flux 的架構，使用 Reducer 管理 state 以及 action 相對應的動作；使用 Store 儲存多個 Reducer；在需要更動資料時使用 dispatch function 來要求處理資料，並更新 reducer 中 state 的值。

Redux 安裝

由於 Redux 是第三方的套件，因此需要先用套件管理工具安裝。

npm install --save redux react-redux

要在 react 中使用 redux 的話，需要同時安裝 redux 以及 react-redux。

Reducer

Reducer 負責管理 state 以及接收到 action 後需觸發的動作。要建立 Reducer，需要新增一個初始值：

const initialState = {
    value: 0
}

並將他放入 Reducer function 中，其中放入兩個參數，第一個是 state ，預設為初始資料，第二個是 action；此外，裡面還可以放入一個 switch 條件判斷，來判斷在什麼 action 下該做什麼事：

const counterReducer = (state = initialState, action) => {
    switch(action.type){
        // 加入plus、minus action
        case "plus":
            return {value: state.value + 1};
        case "minus":
            return {value: state.value - 1};
        default: 
            return state;
    }
}

Store

接著，我們要將 reducer 放入 store 統一管理。

import {createStore} from 'redux';

const store = createStore(counterReducer);

如果是多個 reducer 需要管理的情況下，則需要使用 combineReducers這個 function 來合併 reducer：

import {createStore, combineReducers} from 'redux';

const reducers = combineReducers({
    counterReducer, 
    otherReducer
})

const store = createStore(reducers)

這樣就將 reducer 都放入 store 中了。

Provider

昨天在講Context時，有說到要提供資料到子元件，需要使用Context的Provider包裹住要取用的元件，redux 也是類似的作法，將 react-redux 的 Provider 元件包在App元件的外層，並傳入store：

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';

//...

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>
)

這樣就完成 redux 的基本設定了，在 App 內的元件都能取用到放在 Reducer 中的 state。明天會來介紹一下要怎麼取用 state 以及更動資料。

參考資料
Day12 | React 的快樂小夥伴 - Redux 資料管理篇
[week 23] 淺談 Redux：狀態管理是一門學問
Getting Started with Redux - Redux