React Redux體系結構：在哪里進行數據組織-操作或存儲或組件？

Question

我正在學習構建一個可以播放pokemon api的pokemone應用，它可以為您提供所需的更多信息。 我在弄清楚應該在哪里放置我的代碼以篩選出我的應用所需的唯一信息時遇到了麻煩。

例如，獲取口袋妖怪的類型將返回一個如下所示的type對象：

{pokemon: [...], weakAgainst: [...]}

如果這是我從ajax請求中獲取的數據，而我只想要pokemon數組，應該

1. 我在actionsCreators.js中成功進行了ajax調用后，對此進行了篩選，然后將其返回給分派到商店？ 要么

2. 將所有數據類型對象分派到我的reducer，然后在我的reducer.js文件中篩選出pokemon數組並將其復制到我的狀態？ 要么

3. 復制整個數據對象到我的狀態，然后篩選出我組件的props中的pokemone數組（從mapStateToProps傳遞過來）？

我想應該在減速器中？ 因為它的工作是將數據減少到所需的數據並將其轉移到狀態？

Answer 1

我的想法是，如果有能力的話，應該將減速器交給需要的東西。 不可避免地，您將需要處理和操作化簡器中的數據，但是如果可以將其最小化，那我會。 您的reducer應該是一個純函數-沒有副作用，reduceers總是在給定相同輸入的情況下返回相同的輸出，等等。我喜歡通過為reducer精確提供所需的東西來減少“副作用”，尤其是因為您需要傳遞數據時真是太好了。

您的actionCreator

export function getPokemanApiData() {
  return dispatch => {
    axios.get(APIS.getPokemanURL)
      .then((response) => {
        dispatch(getSuccess(response))
      })
      .catch((err) => {
        dispatch(getError(err))
      })
  }
}

function getSuccess(response) {
   return {
      type: TYPES.MY_POKEMAN_TYPE,
      payload: response.pokemon

   }
}

---

減速器

case TYPES.MY_POKEMAN_TYPE:
   return {
      ...state,
      pokemonData: action.paylod
   }

因此，按照我的看法-嘗試減少副作用，最大程度地減少減速器要做的工作量。 也使事情更容易測試。 在上面的示例中，Reducer完全具有所需的功能，並返回新狀態而沒有太多麻煩。 我讀過其他代碼，他們喜歡在其中進行減速器的提升，而不是我。 我想聽聽別人怎么說。