[2020-03-21] Redux-Promise-Middleware

[gracekrcx]

Redux-Promise 是什麼

dispatch 一個 promise，middleware 幫你執行

1. Redux-Promise 會去執行 payload 的 promise，並返回固定的 type
2. handling of async action creators in Redux.

const asyncAction = () => ({
  type: 'PROMISE',
  payload: new Promise(...),  // payload 是一個 promise
})

結合 Redux Thunk to chain action creators.

const secondAction = (data) => ({
  type: 'SECOND',
  payload: {...},
})

// 結合 redux thunk
const firstAction = () => {
  // 這裏 dispatch 一個 function ---> thunk 被觸發
  return (dispatch) => {
    // 這裏 dispatch action 是 payload 帶 promise ---> promise 被觸發
    // 所以會經過 type : ''FIRST__PENDING''
    // 然後 type : ''FIRST_FULFILLED''
    const response = dispatch({
      type: 'FIRST',
      payload: new Promise(...),
    })
    // dispatch 另一個 action 
    response.then((data) => {
      dispatch(secondAction(data))
    })
  }
}

Redux-Promise 執行順序

action.type = 'GET_DATA'
=> dispatch({type: type + '_PENDING'})  // promise 發出
=> action.payload.then((data) => dispatch({
 // sucess
 type: type + '_FULFILLED',
 payload: data
})).catch({
 // fail
 type: type +  'FOO_REJECTED',
 payload: err
})

[gracekrcx]

藉由 redux 去發 request

1. component 只是呼叫一個 getData 的 props，測試的時候只要確認這個 function 有沒有被呼叫就好，完全不需要去發真正的 request
2. 如果把發 request 的 function 直接寫在 component 裡，就會發出真正的 api request 但如果寫在 redux dispatch 裡就可以避免發出 request
3. 想像測試的時候會呼叫 component 的 render function 跟 componentDidMount，所以會發出真的 request，但如果寫在 redux 裡面，就可以傳進不同的 props 去避免真的呼叫

結論：先記錄下來，之後寫測試的時候應該會有感觸