Redux：关于如何进行后端持久化的意见/示例？-Java 学习之路

我想知道使用Redux的人们是如何接近他们的后端持久性的 . 特别是，您是将“操作”存储在数据库中还是仅存储应用程序的最后已知状态？

如果要存储操作，是否只是从服务器请求它们，然后在给定页面加载时重放所有这些操作？这可能会导致一些大型应用程序存在大量行为的性能问题吗？

如果您只存储“当前状态”，那么在客户端执行操作时，您在任何给定时间实际上是如何持久保持此状态的？

有没有人有一些代码示例，说明他们如何将redux reducer连接到后端存储api？

我知道这是一个非常“取决于你的应用程序”类型的问题，但我只是在思考一些想法，并试图了解这种“无状态”架构如何在全栈意义上工作 .

感谢大家 .

1 回答

Definitely persist the state of your reducers!

如果您持续执行一系列操作，则无法在您的prod数据库中进行修改而无法修改前端中的操作 .

Example: persist one reducer's state to a server

我们将从三个额外的动作类型开始：

// actions: 'SAVE', 'SAVE_SUCCESS', 'SAVE_ERROR'

我使用redux-thunk来做异步服务器调用：这意味着一个动作创建者函数可以 dispatch 额外的动作并检查当前状态 .

save 动作创建者立即调度一个动作（以便您可以显示微调器，或禁用UI中的'save'按钮） . 一旦POST请求完成，它就会调度 SAVE_SUCCESS 或 SAVE_ERROR 动作 .

var actionCreators = {
  save: () => {
    return (dispatch, getState) => {
      var currentState = getState();
      var interestingBits = extractInterestingBitsFromState(currentState);

      dispatch({type: 'SAVE'});

      window.fetch(someUrl, {
        method: 'POST',
        body: JSON.stringify(interestingBits)
      })
      .then(checkStatus) // from https://github.com/github/fetch#handling-http-error-statuses
      .then((response) => response.json())
      .then((json) => dispatch actionCreators.saveSuccess(json.someResponseValue))
      .catch((error) =>
        console.error(error)
        dispatch actionCreators.saveError(error)
      );
    }
  },

  saveSuccess: (someResponseValue) => return {type: 'SAVE_SUCCESS', someResponseValue},

  saveError: (error) => return {type: 'SAVE_ERROR', error},

  // other real actions here
};

（N.B. $.ajax 将完全取代 window.fetch 的东西，我只是不想为一个函数加载整个jQuery！）

reducer只跟踪任何未完成的服务器请求 .

function reducer(state, action) {
  switch (action.type) {
    case 'SAVE':
      return Object.assign {}, state, {savePending: true, saveSucceeded: null, saveError: null}
      break;
    case 'SAVE_SUCCESS':
      return Object.assign {}, state, {savePending: false, saveSucceeded: true, saveError: false}
      break;
    case 'SAVE_ERROR': 
      return Object.assign {}, state, {savePending: false, saveSucceeded: false, saveError: true}
      break;

    // real actions handled here
  }
}

您可能希望对从服务器返回的 someResponseValue 做一些事情 - 也许它是新创建的实体等的ID .

我希望这有帮助，它对我来说效果很好！

回复于 2024-05-05T02:16:06+08:00

Redux：关于如何进行后端持久化的意见/示例？

1 回答

相关问题