发送 2 个参数来响应 redux 中间件，而不仅仅是一个动作答案

【问题标题】：Send 2 arguments to react redux middleware instead of just one action发送 2 个参数来响应 redux 中间件，而不仅仅是一个动作
【发布时间】：2016-08-30 09:18:09
【问题描述】：

我想将一个布尔值作为第二个参数传递给我的actionCreator，这将决定我的中间件调度什么，但是我如何让我的中间件访问这个第二个参数？我是否必须调度一个数组或对象而不是一个承诺？

export const fetchPokemon = function (pokemonName, booleanValue) {
  return function (dispatch) {
    dispatch({type: 'REQUESTING'})
    const requestURL = `http://pokeapi.co/api/v2/pokemon/${pokemonName}/`
    dispatch(fetch(requestURL))
  }
}

中间件

const fetchPromiseMiddleware = store => next => action => {
  if (typeof action.then !== 'function') {
    return next(action)
  }
  ...
  return response.json()
  }).then(function (data) {
    if booleanValue {
      store.dispatch(receivePokemon(formatPokemonData(data)))
    } else {
      store.dispatch(fetchPokemonDescription(data.name))
    }
  })
}

【问题讨论】：

标签： javascript reactjs redux middleware react-redux

【解决方案1】：

您似乎已经回答了自己，您发送的操作应该包含所有相关数据。最简单的选择似乎是为您的操作添加一个（或多个）属性，因为 Promise 已经是一个对象。

export const fetchPokemon = function (pokemonName, booleanValue) {
  return function (dispatch) {
    dispatch({type: 'REQUESTING'})
    const requestURL = `http://pokeapi.co/api/v2/pokemon/${pokemonName}/`
    dispatch(Object.assign(fetch(requestURL), {
      someNameForYourBooleanParameter: booleanValue
    })
  }
}

和

const fetchPromiseMiddleware = store => next => action => {
  if (typeof action.then !== 'function') {
    return next(action)
  }
  ...
  return response.json()
  }).then(function (data) {
    if (action.someNameForYourBooleanParameter) {
      store.dispatch(receivePokemon(formatPokemonData(data)))
    } else {
      store.dispatch(fetchPokemonDescription(data.name))
    }
  })
}

如果您想继续这条路，我建议将这些值放在 .payload 属性下，以防止与 Promise 类的成员发生任何冲突

我会进一步采用这种方法来避免为同一个逻辑操作分派多个操作：

export const fetchPokemon = function (pokemonName, booleanValue) {
  return function (dispatch) {
    const requestURL = `http://pokeapi.co/api/v2/pokemon/${pokemonName}/`;
    dispatch({
      type: 'REQUESTING',
      promise: fetch(requestURL),
      payload: {
        someNameForYourBooleanParameter: booleanValue
      }
    })
  }
}

【讨论】：