保存到数据库后 React Redux 存储状态更新过程

IT技术 reactjs redux
2021-05-03 19:38:09

我的问题是一个概念性的问题，基于这篇文章中概述的问题： React Redux capture updated store state after updates database。我认为不需要任何代码来理解或能够回答它。但如果不是，它在上面的链接中。

我想我可能错过了一个关于在更改状态变量反映的后端数据的操作之后的 react/redux 状态更新过程的小细节。我的问题是：当我发送一个保存操作时，我是否也应该发送一个请求来更新依赖于底层数据的任何状态？

例如，现在我正在考虑和实现我的代码的方式如下：

  1. 应用程序在 componentDidMount 上启动并ParentComponent加载和分派GET_DATA，它初始化data反映ParentComponent在表中的状态变量

  2. 当一个链接被点击时ParentComponent，ParentComponent渲染ChildComponent这是一个显示元素的react模式弹出窗口，data以便它可以更新

  3. Save and CloseChildComponent 上有 和按钮；当您单击该按钮时，将SAVE_DATA被分派，并将data对其所做的更改ChildComponent保存到数据库中
  4. 这就是我的问题出现的地方……在这一点上，我还应该打电话GET_DATA来派遣data我所在州的“刷新”过程吗？在使用 redux 以便data更新所有依赖的组件时，这是否是处理将数据保存到数据库的正确方法？

注意：我目前正在做的是，在第 3 步之后，我只是触发了一个刷新函数，ParentComponent以便它重新渲染并因此反映data在状态中。我刚刚顿悟的是，data状态无法反映新保存的数据，因为GET_DATA在保存和重新渲染组件后未分派不会触发GET_DATA。

我的假设正确吗？我应该GET_DATA在我的 ParentComponent 中的其他地方调用ComponentWillReceiveProps吗？我在这里遇到的问题是，也许我做错了什么，但它触发了一个无限循环。不知怎的，虽然我觉得是我可以解决我的需要调度的唯一地方GET_DATA局部后ParentComponent状态被设定改变refresh（一个ParentComponent状态变量）true。

1个回答

我认为稍微重构你的动作以利用动作/中间件/减速器模式会对你有好处。

你会有一个 action GET_TRANSACTIONS，这会占用你的 year 参数。您transactionsMiddleware将GET_TRANSACTIONS通过发出获取请求来响应该操作，并GET_TRANSACTIONS_SUCCESS在成功时发送响应数据。transactions然后您的减速器会将数据处理到您的商店中。

actions
export const getTransactions = year => {
  return {
    type: "GET_TRANSACTIONS",
    year
  };
};

export const getTransactionsSuccess = payload => {
  return {
    type: "GET_TRANSACTIONS_SUCCESS",
    payload
  };
};

middleware
function getTransactions(year) {
  fetch().then(response => dispatch(actions.getTransactionsSuccess(response.data));
}

reducer
const getTransactionsSuccess = (state, action) => {
  return Object.assign({}, state, newStuffFromActionPayload);
}

您还将有一个 action SAVE_TRANSACTIONS，这将是您的按钮将发送的内容，以及要保存的数据。您transactionsMiddleware将通过调度更新请求来响应该操作。您的 API 将从更新的记录中返回数据。

这是您让中间件调度后续操作的地方。这可能是您的getTransactions操作，但最好是通过将新数据合并到您的商店来分派您的减速器将响应的操作。

actions
export const updateTransaction = payload => {
  return {
    type: "UPDATE_TRANSACTION",
    payload
  };
};

export const updateTransactionSuccess = payload => {
  return {
    type: "UPDATE_TRANSACTION_SUCCESS",
    payload
  };
};

middleware
function updateTransaction(transUpdate) {
  fetch().then(response => dispatch(actions.updateTransactionSuccess(response.data))
}

reducer
const updateTransactionSuccess = (state, action) => {
  find the record in the state, update it with data from action.payload
  return Object.assign({}, state, updatedRecord);
}

如果一切设置正确，当它检测到商店中的变化时，它应该会触发你的父级的更新。您也避免为每次保存进行两次 API 调用。

其它你可能感兴趣的问题
上一篇在 React-select v2 中旋转箭头指示器 下一篇从组件外部访问 React 组件方法/状态