我的问题是概念性的,基于这篇文章中概述的问题:React Redux capture updated store state after updating database 。我认为不需要任何代码来理解或能够回答它。但如果没有,请访问上面的链接。
我想我可能错过了有关改变状态变量反射(reflect)的后端数据的操作后的react/redux状态更新过程的一个小细节。我的问题是:当我调度保存操作时,我是否还应该调度请求来更新依赖于底层数据的任何状态?
例如,现在我思考和实现代码的方式如下:
应用程序启动,
ParentComponent
在 componentDidMount 上加载和分派(dispatch)GET_DATA
,初始化状态变量data
,该变量反射(reflect)在ParentComponent 上
在表格中当点击
ParentComponent
上的链接时,ParentComponent
会渲染ChildComponent
,它是一个 react 模式弹出窗口,显示data
,以便可以更新- ChildComponent 上有
保存并关闭
按钮;当您单击该按钮时,将调度SAVE_DATA
并将对ChildComponent
所做的data
更改保存到数据库 - 这就是我的问题出现的地方......此时我是否也应该调用
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
。
最佳答案
我认为重构您的操作以利用操作/中间件/ 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 调用。
关于reactjs - 保存到数据库后 React Redux 存储状态更新过程,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48724477/