如何正确处理 Redux 中的同时持久化操作？

Question

使用 Redux 的 React 应用程序。 A 有一个组合减速器，由appStateReducer 和contestReducer 组成。这两个中的每一个都处理应用程序数据的某些部分。 执行操作时，我不仅希望更改相应的状态，还希望永久保存新状态，以便用户在浏览器中重新加载应用程序页面时，状态将被保留。 我的想法是添加第三个 reducer 来只处理保存和加载操作（两个子状态中的每一个分别）。 保存和加载将使用 IndexedDB，通过localbase 包。所有 db 操作（添加、获取、更新、删除）似乎都是同步的，即似乎没有真正需要实现异步操作。 更新：这是错误的，它是异步的，只是一些基本的例子忽略它。

我不确定如何正确处理问题。

1. 我需要一个数据库连接对象，一个单例，在页面加载后初始化一次，它应该由所有保存/加载操作共享，无论要存储或加载状态的哪一部分。这将导致一个单独的减速器只与 db 对象一起工作。如果我这样做，db reducer 必须有权访问所有其他子状态，这在 Redux 中通常不是这种情况。
2. 或者，我可以分别在每个减速器中实现保存和加载操作，实际上没什么大不了的。但是如何让 reducer 可以访问全局 db 对象呢？

它就像用 typescript 编写的 React 应用程序，所有组件都实现为类。

Answer 1

如果您使用中间件，您已经可以访问所有数据，例如：

export const requestPost = (id) => (dispatch,getState) => {
  // You can make an bank for post and check If data exist or not
  const postState = getState().bank.posts.data;
  const found = postState?.find((post) => post.id === id);

  if (found) {
    dispatch({ type: SUCCESS.POST, data: found });
  } else {
    dispatch({ type: REQUEST.POST });
    API.get(`/post/v2?id=${id}`)
      .then((res) => dispatch({ type: SUCCESS.POST, data: res.data[0] }))
      .catch((err) => errorHandler(err, FAILURE.POST));
  }
};

只需 make 和 reducer 即可将数据保存在 DB 或其他地方，并在开始时读取它们。