redux reducer筆記

踩坑一，reducer過於抽象

reducer寫得沒那麼抽象也不會有人怪你的。^_^

reducer其實只有一個，由不一樣的reducer composition出來的。因此，

1. reducer的父做用域是共享的
2. 某一個action被髮出後，會在總reducer中進行查找出來的reducer代碼

例如：

//reducer01.js
const disposeFetchRandom = (preState = {}, action) => {
  switch (action.type) {
    case `${REQUEST_BEGIN}${action.condition}`:
    case `${RECEIVED}${action.condition}`:
    case `${RECEIVE_FAILED}${action.condition}`:
      //do something to state
    default:
      return preState;
  }
}

和

//reducer02.js
const disposeCategories = (preState = {}, action) => {
  let condition = action.condition
  switch (action.type) {
    case `${REQUEST_BEGIN}${condition}`:
    case `${RECEIVED}${condition}`:
    case `${RECEIVE_FAILED}${condition}`:
      //do something
    default:
      return preState
  }
}

針對上面兩個Reducer：

1. 當dispatch({type: "REQUEST_BEGIN_RANDOM"})時，reducer01.js與reducer02.js都會對其進行處理
2. 沒法處理dispatch({type: "REQUEST_BEGIN_RANDOM})和dispatch({type: "REQUEST_BEGIN_CATEGORIES"})這兩個action
3. 解決辦法。改成(以reducer01.js爲例)

//reducer01.js
const RANDOM = "_RANDOM";
const disposeFetchRandom = (preState = {}, action) => {
  switch (action.type) {
    case REQUEST_BEGIN + RANDOM://必須明確指定action.type
    case RECEIVED + RANDOM:
    case RECEIVE_FAILED + RANDOM:
      //do something to state
    default:
      return preState;
  }
}