Question

我有一个React应用程序，它与本地本机状态管理一起使用redux状态管理工具，即react（组件/容器）状态。假设有一个表单组件，其数据以react状态存储。通过sagas进行并处理API调用，后者会相应地更新Redux Store。我如何更改反应状态，例如将表单状态键更改为loading: false，或者通常情况下，在传奇从API调用接收到数据之后，我将如何用数据更新表单（受控表单或不受控制的表单）。对于受控表单，将有一个容器组件来管理该表单的道具，但是又如何更新容器的状态呢？我不想同时在redux和react状态下存储数据，尤其是如果该数据是用于本地存储而不是redux存储的

如果我使用getDerivedStateFromProps方法，我将再次需要将该数据存储在例如reduxState中，以便最终进行复制或计算并使其进入反应状态。我现在正在使用下面描述的方法，但是我想知道您是否还有其他建议。

https://github.com/redux-saga/redux-saga/issues/907

我正在使用的示例代码如下，类似于链接中描述的代码

validate = (drops, senderDetails, revalidate) => {
    const { largestLCU, actions: { validateDispatch } } = this.props
    const promise = new Promise(resolve => validateDispatch(drops, senderDetails,
      requestBatchSize, defaultMaxCapPerStop, defaultMarkerColor, largestLCU, resolve, revalidate))
    promise.then(({ success, data }) => {
      if (success) {
        this.setState((state) => {
          const { messages } = this.props
          return {
            ...state,
            senderDetails: {
              ...state.senderDetails,
              ...data,
            },
            currentStatus: {
              ...state.currentStatus,
              isAllValid: messages.length === 0,
              isFileSelected: false,
            },
            csvFile: null,
            loading: false,
          }
        })
      } else {
        this.setState({
          loading: false,
        })
      }
    })
  }

validateDispatch派发一个动作，redux saga拦截，执行Api调用，并在Promise解决后返回某些数据以更新react状态。当然这是一个折衷方案

Answer 1

通常来说，我认为您想利用redux-saga的优势：处理异步副作用。您的示例代码通过在回调函数中使用promise来绕过redux-saga的好处。没有什么可以阻止您将redux-saga与redux thunk或基于承诺的回调一起使用，但是您必须权衡是否值得（或需要）以多种方式处理项目中的异步副作用。

您似乎在处理几个问题。

一个令人关注的问题是在redux存储和组件状态中的数据重复。

我不想同时在redux和react状态下存储数据，尤其是如果该数据用于本地存储而不是redux存储

您指的是什么数据？

如果您指的是实际的服务器有效负载，那么将服务器有效负载存储在redux存储中并让react-redux在redux状态更改时更新组件是很常规的。这是redux所基于的单向数据流。

如果您是指“派生”数据（可以从服务器有效负载推断出的数据），那么我建议不要在redux存储和组件状态下都复制此数据。建议仅在Redux存储中存储所需的最少数据量-否则会遇到一致性问题，并维护/更新同一数据的多个副本。您可以查看redux data normalizers或选择器（例如重新选择）来处理此问题。 Redux's docs对这些概念有很好的解释。

由于您使用的是本地组件状态，因此也许您可以考虑使用react's context API，它可以替代redux的状态管理。我一直在使用具有本地组件状态的上下文api，但通常我的用法仅限于真正的“临时/短暂” UI状态（例如，是否显示/隐藏弹出窗口）。我还没有尝试（或不需要）像上面的示例代码那样使用react的上下文来绕过redux-saga / react-redux。

祝你好运：）

在Redux存储区中的状态更改与相应的反应状态更改之间进行交互的正确方法

1 个答案: