Question

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

我不知道如何正确处理这个问题。

我需要一个数据库连接对象，一个单例，在页面加载后初始化一次，它应该由所有保存/加载操作共享，无论状态的哪一部分要存储或加载。这将导致单独的 reducer 只与 db 对象一起工作。如果我这样做，db reducer 将不得不访问所有其他子状态，这在 Redux 中通常不是这种情况。
或者，我可以分别在每个减速器中实现保存和加载操作，实际上没什么大不了的。但是如何让 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 或某处，并在开始时读取它们。

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

1 个答案: