我应该根据发出的调用还是根据减速器管理的状态来组织我的 react redux 减速器组合？答案

【问题标题】：Should I organize my react redux reducer composition based on the calls made OR based on the state a reducer manages?我应该根据发出的调用还是根据减速器管理的状态来组织我的 react redux 减速器组合？
【发布时间】：2017-01-02 12:53:19
【问题描述】：

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

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 composition 的文档，我不确定拥有 1 个减速器与 2 个减速器是否会更清洁。这两个调用并不相互依赖，但是每个不同的 pokemon 输入都需要进行两个调用，并且从两者返回的数据都属于一个 pokemon，所以我认为它应该在一个 reducer 中处理状态的一部分.

【问题讨论】：

标签： javascript reactjs redux react-redux reducers

【解决方案1】：

您进行的 AJAX 调用应与操作类型配对。然后，您应该返回类型和有效负载，我根据您的代码假设，您打算请求响应。

//Now sure where these functional are define or what they do, but I'll assume they are selectors of some sort?
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))
    })
  }
}

你的动作可能看起来像这样：

const data = fetchPokemon(Charmander);
//this can be defined somewhere else in your app, should not be in your actions file.    

export const pokemonAction(data) {
  return {
    type: "GET_POKEMON_NAME",
    payload: data.name
  }
}

//repeat for any other call

最佳做法是分别定义您的类型，以便可以将它们拉入您的操作文件和减速器文件中。你如何构建你的 action 和 reducer 很大程度上取决于你的响应对象。

export const getPokemonReducer(state= {}, action) {
  if(action.type === "GET_POKEMON_NAME") {
    return {
     ...state,
     [pokemonName]: action.payload
    }
   if(action.type === "GET_POKEMON_DESC") {
    return {
     ...state,
     [pokemonDesc]: action.payload
    }
}

Reducer 可以以多种不同的方式使用，具体取决于您要如何塑造您的状态。您应该考虑如何在整个应用程序中使用这些信息。上面的示例将给出一个属性，我们称之为“Pokemon”，并且该属性值是上述两个属性的对象。

例如，如果您只想拉入名称而不想将其拉入 this.props.pokemon.pokemonName，那么也许您会考虑使用单独的减速器。我还会考虑研究诸如axios 和redux-promise 之类的抽象，它们使异步调用在redux 中更易于管理。

【讨论】：

【解决方案2】：

在你的情况下我会使用 1 个减速器。

看看你的状态结构会很有用，但我认为你有类似的东西：

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

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

reducer 会切换动作：在一种情况下会更新身高和体重，在另一种情况下会更新描述：

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;
    }
}

【讨论】：