3

许多 redux 示例显示直接在异步操作中发出 HTTP 请求；但是，这将导致所有请求共有大量重复代码，例如：

  • 根据状态码重试失败的请求
  • 将通用 HTTP 标头附加到每个请求。
  • 根据响应调用额外的 http 请求（即：oauth 令牌刷新）
  • 在路由转换中中止正在进行的请求。

我的直觉是可以使用中间件来发出 http 请求（与redux-api-middleware.store为不变性付出很小的代价？

4

4 回答 4

8

Your action creators are just JavaScript functions.

If you have duplication between several functions, you extract the common code into another function. This is no different. Instead of duplicating the code, extract the common code into a function and call it from your action creator.

Finally, this pattern can be abstracted away with a custom middleware. Check out the “real world” example in Redux repo to see how it can be done.

于 2015-10-16T08:01:22.087 回答
2

除了中止之外的所有操作都可以在保持不可变的同时通过使用请求工厂来完成，该工厂在返回请求之前附加.then和.catch（或等效，取决于承诺风格）到请求。

于 2015-10-16T05:10:15.903 回答
1

您可以拥有一个执行其操作的操作，此外它还调用另一个操作，要实现这一点，您需要一个redux-async-transitions，示例代码如下

function action1() {
 return {
  type: types.SOMEFUNCTION,
  payload: {
   data: somedata
  },
  meta: {
   transition: () => ({
    func: () => {
     return action2;
    },
    path : '/somePath',
    query: {
     someKey: 'someQuery'
    },
    state: {
     stateObject: stateData
    }
   })
  }
 }
}

这是异步调用

function asynccall() {
 return {
  types: [types.PENDINGFUNCTION, types.SUCCESSFUNCTION, types.FAILUREFUNCTION],
  payload: {
   response: someapi.asyncall() // only return promise
  }
  meta: {
   transition: (state, action) => ({
    onPending: () => {
    },
    onSuccess: (successdata) => {
     //gets response data can trigger result based on data
    },
    onFail: (promiseError) => {
     //gets error information used to display messages
    }
   })
  }
 }
}
于 2015-12-07T10:02:37.290 回答
0

在中间件中调用 http 请求与在动作创建者中调用它是一样的坏主意。您应该专注于使我们的 reducer 足够强大以处理异步效果以及同步状态转换。我在使用 redux 时发现的最好方法是在 reducer 中描述效果（http 请求就是效果），然后使用redux-loop或redux-saga等库处理它

为了避免代码重复，您可以提取通用代码来请求函数并将其用于处理 http 效果

于 2016-04-30T14:24:55.057 回答