Reactjs 保存到数据库后响应Redux存储状态更新过程

我的问题是一个概念性的问题，基于本文中概述的问题：。我不认为需要任何代码来理解或回答它。但如果不是，则位于上面的链接

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

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

应用程序启动并在componentDidMount上加载和分派

GET_DATA

，该组件初始化状态变量

DATA

，该变量反映在表中的

ParentComponent

上

单击链接时，

ParentComponent

，

ParentComponent

呈现

ChildComponent

，这是一个反应模式弹出窗口，显示

数据的元素，因此可以对其进行更新

ChildComponent上有和

保存和关闭
按钮；当您单击按钮时，
SAVE_DATA
被调度，并且在
ChildComponent
上对
DATA
所做的更改将保存到数据库中

这就是我的问题所在。。。此时，我是否也应该调用

GET_DATA

，以调度在我的状态下“刷新”

DATA

的过程？在使用redux时，这是否是处理将数据保存到数据库的正确方法，以便所有依赖

数据的组件都得到更新

注意：我目前正在做的是，在第3步之后，我只需在

ParentComponent

中触发一个刷新函数，以便它重新启动，从而在状态中反映

数据。我刚才的顿悟是，状态中的
data
无法反映新保存的数据，因为
GET\u data
在保存后未被调度，并且重新提交组件不会触发
GET\u data

我的假设正确吗？我是否应该在我的父组件中的其他位置调用
GET_DATA
，例如
component将接收道具
？我在这里遇到的问题是，也许我做错了什么，但这会引发一个无休止的循环。尽管我觉得这是唯一一个可以满足我在本地
ParentComponent
状态通过设置
refresh
（一个
ParentComponent
状态变量）更改后调度
GET_DATA
的需要的地方为了
true
我认为重构您的操作以利用action/middleware/reducer模式会对您有所帮助

您将有一个操作
GET_TRANSACTIONS
，该操作将占用您的year参数。您的
TransactionMiddleware
将通过发出取回请求来响应
GET\u TRANSACTIONS
操作，并使用成功时的响应数据发送
GET\u TRANSACTIONS\u 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);
}

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

您还将有一个操作
SAVE\u TRANSACTIONS
，该操作将与要保存的数据一起发送给您的按钮。您的
TransactionMiddleware
将通过发送更新请求来响应操作。API将从更新的记录返回数据

这就是让中间件分派后续操作的地方。它可以是您的
getTransactions
操作，但最好是分派一个操作，您的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);
}

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。
对于超长的回答，我深表歉意，希望至少能有所帮助。如果你保持你的行为和现在一样，你应该能够用链式行为来实现同样的想法。太棒了！！这是我在官方redux网站上的研究基础上开始做的，我使用了实现中间件设置的todos示例应用程序。我已经将get_事务设置为使用中间件设置，只需要对save执行相同的操作。我相信它会成功的。我在一年多前问了一个类似的问题，但一直没有得到回应。但我觉得这是react redux的一个基本方面，我只是想了一个错误的方法。谢谢你的确认！一旦我设置并测试了所有东西，我会回来检查答案。@mindlies我设置并测试了不同的选项。1.在我的savetransactions中间件中，我分派
getTransactions
。它工作得很好，做了我想做的一切。2.正如您所建议的，在我的inital
updateTransactions
调用中完成这一切。这里我遇到了一个问题，因为似乎redux combine reducer为每个reducer保留了一个单独的状态树。我的假设正确吗？在我的
updateTransactions
中间件中，我将状态设置为新值，但我的组件绑定到
getTransactions
还原程序中的状态。这是我不知道的combine reducer的一个方面。没错，但是您应该将
updateTransactions
的reducer操作与其他事务reducer函数放在同一个文件中。两者都在对您商店中的交易进行处理。实际上，我的所有操作都在同一个文件中。只有我的还原程序被分割成不同的文件。那么，将所有还原程序放在同一个文件中是否允许我在所有还原程序中共享相同的状态？我想是的。如果是，是否有任何惯例建议不这样做？