Question

我的问题是概念问题，基于此帖中列出的问题：React Redux capture updated store state after updating database。我认为不需要任何代码来理解或能够回答它。但如果不是，那就是上面的链接。

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

例如，现在我正在思考它并实现我的代码的方式如下：

应用程序启动，ParentComponent在componentDidMount上加载并发送GET_DATA，初始化状态变量data，该变量反映在表格中的ParentComponent
< / LI>
点击ParentComponent上的链接时，ParentComponent呈现ChildComponent这是一个反应模式弹出窗口，显示data元素，以便更新
ChildComponent上有和Save and Close按钮;单击该按钮时，将调度SAVE_DATA并将data上对ChildComponent所做的更改保存到数据库
这就是我的问题出现的地方......此时我是否还应该呼叫GET_DATA在我的州内发送“刷新”data的过程？在使用redux时，这是处理将数据保存到数据库的正确方法，以便依赖data的所有组件都得到更新吗？

注意：我目前正在做的是，在第3步之后，我只是在ParentComponent中触发刷新功能，以便它重新呈现并因此反映data处于状态。我刚才的顿悟是状态data无法反映新保存的数据，因为保存和重新呈现组件后GET_DATA尚未调度GET_DATA不会触发GET_DATA。

我的假设是否正确？我应该像ComponentWillReceiveProps那样在我的ParentComponent中的其他地方调用GET_DATA吗？我在这里遇到的问题是，我可能做错了什么，但它触发了无限循环。不知何故，虽然我觉得这是我通过设置ParentComponent（refresh状态变量来改变本地ParentComponent状态后我可以解决true发送需求的唯一地方到top。

Answer 1

我认为为了利用action / middleware / reducer模式重构你的行为会对你有所帮助。

你会有一个行动GET_TRANSACTIONS，这将需要你的年度参数。您的transactionsMiddleware会通过提取您的获取请求来响应GET_TRANSACTIONS操作，并会在成功时发送GET_TRANSACTIONS_SUCCESS响应数据。然后，transactions 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会通过调度更新请求来响应操作。您的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调用。

保存到数据库

1 个答案: