保存到数据库后 React Redux 存储状态更新过程 [英] React Redux store state update process after saving to database

问题描述

我的问题是一个概念性的问题，基于这篇文章中概述的问题:React Redux 在更新数据库后捕获更新的存储状态.我认为不需要任何代码来理解或能够回答它.但如果不是，则在上面的链接中.

My questions is a conceptual one and based on the issue outlined in this post: React Redux capture updated store state after updating database. I don't think any code is needed to understand or be able to answer it. But if not it is at the link above.

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

I think I might have missed a small detail about the react/redux state update process following an action that changes the back-end data that a state variable reflects. My question is: When I dispatch a save action, should I then also be dispatching a request to update any state that depends on that underlying data?

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

So for example, right now the way I'm thinking about it and implementing my code is as follows:

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

1. app starts and ParentComponent loads and dispatches GET_DATA on componentDidMount which initializes state variable data which is reflected on ParentComponent in a table

当在 ParentComponent 上点击链接时，ParentComponent 会呈现 ChildComponent，这是一个显示 ParentComponent 元素的 react-modal 弹出窗口代码>数据所以它可以更新

when a link is clicked on ParentComponent, ParentComponent renders ChildComponent which is a react-modal popup that displays elements of data so it can be updated

注意:我目前正在做的是，在第 3 步之后，我只是在 ParentComponent 中触发一个刷新函数，以便它重新渲染并因此反映状态中的 data.我刚刚的顿悟是状态中的 data 无法反映新保存的数据，因为在保存和重新渲染组件后没有触发 GET_DATAGET_DATA.

Note: What I'm currently doing is that after step 3, I am simply triggering a refresh function in ParentComponent so that it rerenders and hence reflects data in state. The epiphany I just had is that there is no way for data in state to reflect the new saved data because GET_DATA has not been dispatched after saving and rerendering the component does not trigger GET_DATA.

我的假设是否正确?我应该像 ComponentWillReceiveProps 那样在我的 ParentComponent 的其他地方调用 GET_DATA 吗?我在这里遇到的问题是，也许我做错了什么，但它触发了一个无限循环.不知何故，我觉得这是在本地 ParentComponent 状态通过设置 refresh 改变后，我可以解决我需要调度 GET_DATA 的唯一地方(一个 ParentComponent 状态变量)到 true.

Are my assumptions correct? Should I be calling GET_DATA somewhere else in my ParentComponent like ComponentWillReceiveProps? The issue I had here is that maybe I'm doing something wrong, but it triggers an endless loop. Somehow though I feel that is the only place where I can address my need to dispatch GET_DATA after the local ParentComponent state is changed by setting refresh (a ParentComponent state variable) to true.

推荐答案

我认为稍微重构一下操作以利用 action/middleware/reducer 模式会对您有所帮助.

I think it would benefit you to refactor your actions a bit to take advantage of the action/middleware/reducer pattern.

您将有一个操作 GET_TRANSACTIONS，这将占用您的年份参数.您的 transactionsMiddleware 将通过发出您的获取请求来响应 GET_TRANSACTIONS 操作，并在成功时发送带有响应数据的 GET_TRANSACTIONS_SUCCESS.您的 transactions reducer 然后会将数据处理到您的商店中.

You would have an action GET_TRANSACTIONS, that would take your year param. Your transactionsMiddleware would respond to the GET_TRANSACTIONS action by making your fetch request and would dispatch GET_TRANSACTIONS_SUCCESS with the respond data on success. You transactions reducer would then process the data into your store.

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 将返回更新记录中的数据.

You would also have an action SAVE_TRANSACTIONS, which would be what your button would dispatch, along with the data to save. Your transactionsMiddleware would respond to the action by dispatching the update request. Your API would return the data from the updated record.

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

This is where you would have the middleware dispatch a follow-up action. It could be your getTransactions action, but it'd be even better to dispatch an action that your reducer would respond to by merging in the new data to your store.

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

If everything is set up correctly, it should trigger an update on your parent when it detects the change in the store. You avoid making two API calls for every save as well.

这篇关于保存到数据库后 React Redux 存储状态更新过程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！