淺談 Redux：狀態管理是一門學問

在認識 Redux 之前

從過去到現在，關於「狀態管理」，不同的前端框架有不一樣的處理方式：

• jQuery：資料與畫面分離，重點放在「畫面」上。若需要資料，必須要從畫面上把資料拿回來。
• Vue & Angular：資料與畫面「雙向綁定」。
• React：關注在「資料」的變動，透過 state 變動來渲染畫面。

Flux 簡單介紹

Facabook 當時會提出 React 和 Flux 就是要解決當 App 架構越變越大，功能變更複雜時所遇到的問題。舉例 FB Messenger 通知，程式碼中會有很多部分會操控到管理通知的 Model，使得難以回溯追蹤。

在 Flux 的架構之下，想要改變 View（畫面）或是 Data（資料），都需要發出 Action 指令，由 Dispatcher 統一變動 Store，再把更動好的值，傳回 View。

在小型的專案裡面卻顯得多此一舉，直接透過修改 Store 去更動 View 即可；但在大型專案中，透過這樣的「集中」管理方式，會比較好進行「狀態管理」。

Redux 是什麼？

Redux 是一個「用於 JavaScript 應用程式的狀態管理工具」，用來實現「狀態管理機制」的套件。

提示重點：

1. 不直接更動 store 裡面的資料，而是透過 dispatch 發送一個 Action（物件）又稱為指令，經過 Store 來改變。
2. Reducer 跟 Array.prototype.reduce() 相似，會有現在的狀態跟元素，透過 reduce() 會返回新的狀態跟元素。

Redux 實際操作

React 和 Redux 兩者可以獨立操作，並無相依性。兩者都可以進行狀態管理。

• React：把 state 放在 component 裡面。
• Redux：把 state 放在 Store 裡面，而 Store 是一個物件。

React + Redux：我們來實作簡易的 pagelist

首先，確立資料夾結構，先開設一個 Redux 資料夾，把所有相關的檔案放進裡面
資料夾

• /reducers (資料夾)
  • pages.js
  • index.js
• actionTypes.js
• actions.js
• store.js
• selectors.js

actionTypes.js

import { createStore } from "redux";
import rootReducer from "./reducers"

export default createStore(rootReducer);

actionTypes.js

export const ADD_PAGE = "add_page";
export const DELETE_PAGE = "delete_page";
export const EDIT_PAGE = "edit_page";