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

Question

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

我想我可能错过了有关改变状态变量反射(reflect)的后端数据的操作后的react/redux状态更新过程的一个小细节。我的问题是:当我调度保存操作时，我是否还应该调度请求来更新依赖于底层数据的任何状态？

例如，现在我思考和实现代码的方式如下:

1. 应用程序启动，ParentComponent 在 componentDidMount 上加载和分派(dispatch) GET_DATA，初始化状态变量 data，该变量反射(reflect)在 ParentComponent 上 在表格中

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

3. ChildComponent 上有保存并关闭按钮；当您单击该按钮时，将调度 SAVE_DATA 并将对 ChildComponent 所做的 data 更改保存到数据库
4. 这就是我的问题出现的地方......此时我是否也应该调用 GET_DATA 来调度我所在州的“刷新”数据 过程？这是使用 redux 时将数据保存到数据库以便所有依赖 data 的组件得到更新的正确方法吗？

注意:我当前正在做的是，在第 3 步之后，我只是在 ParentComponent 中触发刷新函数，以便它重新渲染，从而反射(reflect)状态中的 data 。我刚刚的顿悟是，state 中的 data 无法反射(reflect)新保存的数据，因为保存后尚未调度 GET_DATA 并且重新渲染组件不会触发GET_DATA。

我的假设正确吗？我是否应该在 ParentComponent 中的其他地方调用 GET_DATA，例如 ComponentWillReceiveProps？我在这里遇到的问题是，也许我做错了什么，但它触发了无限循环。不知何故，我觉得这是唯一可以在本地 ParentComponent 状态通过设置 refresh 更改后满足分派(dispatch) GET_DATA 需求的地方( ParentComponent 状态变量)为 true。

Answer 1

我认为重构您的操作以利用操作/中间件/ reducer 模式会对您有益。

您将有一个操作GET_TRANSACTIONS，它将获取您的年份参数。您的 transactionsMiddleware 将通过发出提取请求来响应 GET_TRANSACTIONS 操作，并在成功时使用响应数据调度 GET_TRANSACTIONS_SUCCESS。然后，您的交易 reducer 会将数据处理到您的商店中。

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

您还将有一个操作SAVE_TRANSACTIONS，这将是您的按钮将调度的操作以及要保存的数据。您的 transactionsMiddleware 将通过分派(dispatch)更新请求来响应操作。您的 API 将从更新的记录中返回数据。

您可以在此处让中间件调度后续操作。它可能是您的 getTransactions 操作，但最好分派(dispatch)一个操作，您的 reducer 将通过将新数据合并到您的存储来响应该操作。

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 调用。