在 React with Redux 中，我什么时候应该将数据保存到后端答案

【问题标题】：In React with Redux, when should I save data to back end在 React with Redux 中，我什么时候应该将数据保存到后端
【发布时间】：2017-05-14 06:47:37
【问题描述】：

在 React with Redux 中，当有一些用户操作时，例如，在 facebook 中，用户添加了一些 cmets，我会调用 dispatch() 将添加操作发送到 redux 存储，但是我应该什么时候调用后端 API 来保存这些数据到数据库？我需要和dispatch()一起做吗？

谢谢

【问题讨论】：

是的，最好。您可以在表单提交并向后端发送请求后立即向 redux 存储添加评论。如果保存成功就很好了。如果请求由于某种原因失败，您可能会考虑让用户知道它失败的视觉通知 - 例如“您没有连接到互联网”......因此，在需要时发送请求并且在有意义的时候发送请求！ :) 这里没有一般规则...

标签： reactjs redux dispatch

【解决方案1】：

一种解决方案是使用诸如redux-thunk（或类似的）之类的中间件包将您的 API 逻辑转移到 thunk 中。

使用 thunk 允许您将特殊类型的 actions 视为函数，这意味着您可以使用特定的动作相关逻辑扩展普通动作。您给出的需要序列化状态的示例是 redux-thunk 的绝佳用例。

您应该注意，与 reducer 不同，thunk 显式支持通过 getState 和 dispatch 函数获取状态和调度后续操作。

下面是一个 ES6 示例，展示了这种多用途 thunk 的外观。

为了演示getState()方法，只有当redux状态shouldSave值为真时，新项目才会通过api保存。

我还将使用 async/await 语法来确保 api 调用在调度本地 redux 操作之前成功。

Thunk 示例 - 添加新项目

import api from './api'

export const addNew = async (item) => {
  return (dispatch, getState) => {
    try{
      const state = getState()
      if(state.shouldSave){
        await api.save(item)
      }
      dispatch({
        type: ITEM_ADD_NEW,
        data: item
      })
    }catch(err){
      const error = new Error("There was a problem adding the new item")
      error.inner=err
      throw(error)
    }
  }
}

【讨论】：