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

小编典典

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

reactjs

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

如果要存储动作，是否只是从服务器请求动作，然后在加载给定页面时重播所有动作？难道这会导致大型应用程序在执行大量操作时出现一些性能问题吗？

如果仅存储“当前状态”，那么在客户端上发生操作时，实际上如何在任何给定时间保持该状态？

有谁有一些代码示例说明如何将redux reducer连接到后端存储api？

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

感谢大家。

阅读 217

2020-07-22

共1个答案

小编典典

绝对坚持您的减速器状态！

如果您坚持执行一系列操作，那么您将不得不在前端数据库中随意修改自己的操作。

示例：将一个reducer的状态持久保存到服务器

我们将从三种额外的操作类型开始：

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

我使用redux-thunk进行异步服务器调用：这意味着一个动作创建者函数可以dispatch执行其他动作并检查当前状态。

该save行动的创建者立即派遣一个动作（这样就可以显示在你的UI中的微调，或禁用“保存”按钮）。然后，一旦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
};

（NB $.ajax完全可以代替这些window.fetch东西，我只是不想为一个功能加载整个jQuery！）

减速器仅跟踪任何未完成的服务器请求。

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等。

我希望这会有所帮助，到目前为止对我来说效果很好！

2020-07-22