在React with Redux中，何时应将数据保存到后端

Question

在React with Redux中，当有一些用户操作时，例如在facebook中，用户添加了一些注释，我会调用dispatch()将添加操作发送到redux商店，但什么时候应该回调结束API将这些数据保存到数据库？我是否需要与dispatch()一起进行？

感谢

Answer 1

一种解决方案是使用中间件包redux-thunk（或类似）将API逻辑传输到 thunk 。

使用thunks可以将特殊类型的actions视为函数，这意味着您可以使用特定的与操作相关的逻辑扩展普通操作。您需要序列化状态的示例是redux-thunk的一个很好的用例。

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

下面是一个ES6示例，说明了这样一个多功能thunk的外观。

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

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

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)
    }
  }
}