五分鐘帶你回顧Redux工做流

Redux工做流解析

Redux是什麼

假設咱們的業務有三個嵌套的組件ABC 組件A想要傳值給組件C 要先傳遞給組件B 交由B傳遞給C 在沒有引入Redux的時候 咱們只能經過這種原始的方法來傳遞 這時候 咱們再假設 若是有一個 公共管理數據狀態的地方 咱們每次傳遞值或者修改值 都從這個地方獲取 那不論業務多複雜 組件嵌套多深 咱們均可以很方便的直接從這個管理倉庫裏 獲取到咱們須要的數據 這就是Redux 一個 數據層的框架 或者說是一個 狀態容器

瞭解Redux工做流

這張圖很是清晰的描述了 Redux的工做流程 光看這一張圖可能會有一點晦澀難懂 可是咱們能夠換個說法 把整個工做流程想像成一個借書的過程

一我的來圖書館借書 他須要說一句話告訴管理員 要借什麼書 管理員要根據他提供的信息 找到對應的書籍 而後拿給他 想象過這個過程之後 再來看這個過程

首先 React Component這個組件就是須要借書的人 同時Store就是這個圖書館的管理員 他須要告訴管理員 他要借什麼書 那麼這個Action Creators就是記錄這個信息 而且告知管理員 同時管理員接收到這個信息之後 他須要查詢管理手冊 找到對應書籍 這個手冊就對應Reducers

對應到實際開發到業務邏輯裏 其實就是 View 建立了一個action 經過dispatch派發到Store 而後Store會自動轉發到Reducers 那麼Reduces就能夠接收到這個action 同時根據action來處理業務邏輯 並返回給Store 那麼接下來一塊兒來看代碼是如何實現的吧

使用Redux完成TodoList

ps:因爲講述的是Redux 因此掠過了基礎的React組件部分

• 安裝Redux npm install redux --save

• 再一次回想流程 咱們須要一個Store(圖書館管理員) 在src目錄下新建一個Store文件夾 並建立index.js生成Store 接收一個reducer參數(對應圖書館管理員的管理手冊) 有了手冊才能夠找到對應書籍對吧～

  // store.js
  import { createStore } from 'redux'
  import reducer from './reducer.js'
  const Store = creaeStore(reducer)
  複製代碼

• 上面已經提到了咱們須要一個reducer 因此 咱們新建一個reducer.js 同時須要注意的是reducer.js是一個純函數 上文已經提到過 這個文件是一個管理手冊 也就說 存放了書籍的具體信息(須要被管理的數據)以及如何處理書籍(業務邏輯)

• reducer能夠接收兩個參數 一個是action 一個是state 默認狀況下 同時能夠定義一組須要被統一管理的數據 把這個須要被管理的數據賦值給state 至於action咱們一下子再聊

// reducer.js
const originData = {
  inputValue: '',
  list: []
}
export default const reducer = (state = originData, action) => {
  return state
}
複製代碼

• 在組件內部引入Store 同時store提供了getState()這個API 可讓咱們獲取定義好的state 既然獲取了數據 那麼若是修改了數據 咱們也是須要讓組件知道的 因此須要使用store提供給咱們的另外一個API subscribe 這裏定義的handleStoreChange其實只作一件事 也就是再次從新獲取state

// 獲取store裏的數據
import store from './Store/'
  constructor() {
    // 獲取數據 
    this.state = store.getState()
    // 組件訂閱store
    store.subscribe(this.handleStoreChange) 
  }
  handleStoreChange() {
    this.setState(store.getState())
  }
複製代碼

• 執行到上面那一步咱們就能夠在咱們的業務組件中使用redux了 在對應業務組件中引入這個Store 同時咱們再次回顧上問中的Redux工做流的那張圖 當有了管理員(store) 而且有了管理手冊之後(reducer)之後 咱們如今只差一步了 也就是告訴管理員 咱們須要借什麼書(操做什麼數據) 也就是組件向Store派發一個action的過程

// 組件派發action

// 組件對應的綁定事件
handleValueChange(e) {
  // 建立一個action type表示要作啥 value 表示須要傳遞的值
   const action = {
    type: 'change_input_value',
    value: e.target.value
  }
  store.dispatch(action) //store接收到事件之後 須要轉發給reducers 交由reducers處理
}
複製代碼

• 當代碼寫到這裏 回頭再去看一次上文提到的比喻 看看發生了什麼 首先 借書人view/React Component經過一句話action告訴了管理員Store要借什麼書 這個時候 管理員須要查閱手冊 來返回對應的書newState 因此咱們回到reducer裏看看 該怎麼實現需求

  • 還記得以前定義reducer.js的時候 reducer函數接收的參數裏有action麼 這個action其實就是store自動轉發給reducer的 因此咱們能夠在reducer裏拿到對應的action 而且根據action定義的type不一樣 處理不一樣的業務邏輯

  • 同時咱們還須要注意一點 在Redux之中 真正能夠修改的數據的 其實只有Store 並非修改的方法寫在reducer裏 reducer就能夠修改數據 因此咱們須要一個返回一個新值給到Store

const originData = {
  inputValue: '',
  list: []
}
//reducer.js
export default (state = originData, action) => {
if (action.type === 'change_input_value') {
  // 返回一個新的state
  const newState = JSON.parse(JSON.stringify(state))
  newState.inputValue = action.value
  return newState  // store會接收到這個newState 而且會把原有數據替換成該數據 真正有權修改數據的仍是Store自己
}
return state
複製代碼

• 寫到這裏 其實咱們就完成了redux的初步使用 以及完整的講解了redux的工做流程 完成了TodoList的第一個功能 順利輸入內容

• TodoList裏剩下的兩個功能就是 點擊添加的時候 展現區域顯示輸入的值 以及在展現區域點擊對應項 則能夠刪除對應項 其實也就是繼續在組件內的對應函數裏建立不一樣的action 而且在reducer裏對對應的action進行處理便可

• 待優化的點 能夠建立action creators 統一管理action的建立 以及 actionTypes的定義 減小由於定義type時發生的拼寫錯誤

加油 💯