javascript - 我应该根据调用还是根据 reducer 管理的状态来组织我的 react redux reducer 组合？

Question

我正在学习构建一个 pokedex 应用程序，在您输入名称并点击提交后，它会为您提供有关 pokemon 的信息。它必须经过 2 次调用才能获得正确的信息，第 1 次获得其高度和体重，然后第 2 次获得其描述(例如“Charmander 通常可以在炎热地区找到......”)。以下是我的 Action 分解。

export const fetchPokemon = function (pokemonName) {
  return function (dispatch) {
    dispatch(requestPokemon(pokemonName))
    const requestURL = `http://pokeapi.co/api/v2/pokemon/${pokemonName}/`
    return $.ajax({
      url: requestURL,
    }).done(function (data) {
      dispatch(receivePokemon(data))
      return fetchPokemonDescription(pokemonName)
    }).done(function (res) {
      dispatch(receivePokemonDescription(res))
    })
  }
}

...

export const fetchPokemonDescription = function (pokemonName) {
  return function (dispatch) {
    dispatch(requestPokemonDescription(pokemonName))
    const requestURL = `http://pokeapi.co/api/v2/pokemon-species/${pokemonName}/`
    return $.ajax({
      url: requestURL,
    })
  }
}

我应该为每个调用设置一个单独的 reducer 吗？查看有关 reducer composition 的文档我不确定拥有 1 个 reducer 与 2 个 reducer 是否会更清洁。这 2 个调用并不相互依赖，但是每个不同的 pokemon 输入都需要进行两个调用，并且从两者返回的数据属于一个 pokemon 所以我认为它应该在一个 reducer 中处理状态的一部分.

Answer 1

我会在你的情况下使用 1 个 reducer 。

查看您的状态结构会很有用，但我认为您有类似的东西:

currentPokemon: {
  name: ...
  height: ...
  weight: ...
  description: ...
}

如果是这种情况，我会使用 1 个 reducer ，因为你只管理状态的 1 个分支 (currentPokemon)。

reducer 会切换 Action :在一种情况下它会更新高度和重量，在另一种情况下会更新描述:

export default function currentPokemonReducer (state = initialState, action) {
  switch(action.type) {
    case DATA_RECEIVED:
      return {
        ...state,
        height: action.payload.height,
        weight: action.payload.weight
      }
    case DESCRIPTION_RECEIVED:
      return {
        ...state,
        description: action.payload
      }

    ...

    default:
      return state;
    }
}