使用带有 promise 的 redux 最佳实践答案

【问题标题】：Using redux best practice with promises使用带有 promise 的 redux 最佳实践
【发布时间】：2017-09-01 18:39:43
【问题描述】：

export function postRegister(credentials) {
    console.log(credentials);

    return dispatch => {
        return fetch('/user/register', {
            method: 'post',

            body: JSON.stringify(credentials),

            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(response => response.json())
    }
}

我对上面的代码没有什么疑问。

我可以使用 export () => {} 来代替这里写函数这个词吗？只是为了保持清洁。
dispatch 是全局变量吗？我没有在文件的某处看到它被导入或需要。
此处是否需要指定标头？我在每个 api 调用中都看到了这一点。
为什么在这个 promise 调用中没有捕获？总体来说代码不好？

【问题讨论】：

看起来像 codereview.stackexchange.com 问题

标签： javascript reactjs ecmascript-6 redux

【解决方案1】：

不，您可以，但您需要一个名称才能在您的组件中实际使用它。
不，dispatch是箭头函数的参数，你也可以定义getState来访问当前的redux状态。顺便说一句，您完全可以根据需要指定新名称。
这取决于您的服务器，但通常如果您使用 JSON API，您会希望发送该标头。
是的，总的来说，代码看起来不太好，我建议使用中间件来处理获取请求，您的操作应该只发送诸如url、body、method 等配置。 .. 并且您的中间件应该处理添加公共标头（例如内容类型）。

你可以有这样的动作：

export function postRegister(credentials) {
  return {
    types: [REGISTER, REGISTER_SUCCESS, REGISTER_FAIL],
    promise: {
      url: '/user/register',
      data: credentials,
    },
  };
}

就这么简单，那么您的中间件应该根据服务器响应进行获取和分派操作类型。

如果您想了解更多有关中间件应如何处理获取请求和分派操作的信息，请务必查看我的帖子：https://stackoverflow.com/a/39971763/146718

【讨论】：

【解决方案2】：

除非是导出默认值，否则不会。因为以后你需要按名称导入它。
不，dispatch 是传递给您的函数的参数：

（调度）=> {}
完全取决于您的应用程序、服务器、请求等。
你可以自己添加 .catch((e) => {})，或者使用一些拦截器来处理一般错误，从那里做一个 dipatch 并添加一个 reducer 来处理这些操作。你可以在这里阅读更多：

What is the best way to deal with a fetch error in react redux?

【讨论】：