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

Question

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

谢谢

Answer 1

一种解决方案是使用中间件包将您的 API 逻辑传输到 thunk 中，例如 redux-thunk (或类似)。

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

您应该注意，与 reducer 不同，thunk 明确支持通过 getState 和 dispatch 函数获取状态并分派(dispatch)后续操作。

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

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

我还会使用 async/await 语法来确保 API 调用在分派(dispatch)本地 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)
    }
  }
}