Redux

是一個基於Flux架構，為了處理客戶端應用程式中(client applications)資料(data)的library

github doc 中文doc

資料的基本流程

三大原則

  1. 只使用一個store將整個應用程式的狀態(state)用物件樹(object tree)的方式儲存起來 redux只有一個store，使用reducer functions負責每個小部分的管理（在整個store 內）

  2. 唯一可改變這個state的方法就是發送action action就只是一個物件，帶入action type和參數 而實際因應action裡的內容對state做變化的函式就叫reducer

  3. .因為redux框架的設計，所以所有計算新state的functions（也就是reducers）都 必須是 pure function 因為都是pure function，所以很容易debug！甚至是time-travelling between state

application’s state is immutable 代表任意組件(Component)都可以修改（非修改原有的state，參考下面那句） immutable 代表不可修改的，所以redux通過 reducer functions去產生新的state去取代 舊的state immutable 代表不可修改的，所以redux通過reducer functions去產生新的state去取代舊的state

架構

  • store - json object

  • constant - 固定參數，通常action的type我都會寫在這

  • action - function，必須包含type

  • reducer - 有兩個參數，分別為舊有的state和action。而reducer回傳的就是更新後的 state

  • component and container

component vs container 如下圖 (圖片來源)

簡單說，處理有關邏輯跟store的獲取、存取、變動等動作的component，稱為 container component 單純處理 props 顯示在螢幕上的長相（ui），稱作 presentational component react-redux提供了一個簡單的工具 connect，簡單和快速的寫出container

詳細介紹可參考此 網站

常用方法（以下皆可到上方提供的doc內看）

redux

  • createStore - 傳入reducer，簡單的創建store redux 為 single store，此 createStore 方法在應用內應該只會被呼叫過一次

  • combinReducers - 因某些原因（結構、模塊化等..）將reducer拆分成多個單獨的函數，拆分後的每 個函數負責獨立管理state的一部分。combinReducers的作用就是，把由多個不同reducer 函數作為value的object合併為一個最終的reducer函數，然後就可以對這個reducer調用 createStore方法

  • applyMiddleware - 使用middelware

  • binActionCreators - 傳入 actions和dispatch。使用dispatch對每個action進行包裝，以便可以直接調用他們

react-redux

  • Provider - 在應用內，負責將唯一的store傳給其他子元件

  • connect - 方法需要一些參數(第一個 () 內)，但大多數時候我們只需要前兩個參數(mapStateToProps 和 mapDispatchToProps)(Component) maptStateToProps 和 mapDispatchToProps 這兩個fun會回傳兩個Object，將這兩個Object整理成Props然後丟進Component內

maptStateToProps - 將store內的state轉成js object作為參數傳入該container(也就是該container的props)。 透過此來選取container需要state的哪一部分 mapDispatchToProps - 此參數型態必須是function。將store的dispatch()當作參 數傳入該container(也就是該container的props)

跟Store交互的方法

  1. dispatch(action) - 直接向store發出一個action

  2. getState() - 獲取現在app內的整個store state

Middleware

  • redux-thunk

  • redux-logger

  • redux-persist

  • redux-saga

  • ....

實作範例

參考

redux 下有一個store ，為json格式，但因為很大，所以有reducer把store去做切片，然後在index組成一個大的object Container 一個描述你的Component跟哪些reduer的切片和哪些Action有關係=> 就是利用 export connect(mapStateToProps, mapDispatchToProps)(Component); 中的 mapStateToProps和mapDispatchToProps這兩個fun會回傳2個Object，將這兩個Object整理成你的Props然後丟進Component內

此 connec t為 heighr-order function 和 heighr-order component，很推薦去暸解！

PreviousOtherNextPractice

Last updated