将基于promise的React应用程序转换为redux-saga：如何设置React组件变量？

Question

我是 redux-saga 的初学者，作为一项任务，我想尝试将现有的大型 React 应用程序从 Promises 转换为 redux-saga。我正在取得一些进展，但遇到的一个问题是，当我使用 Promise 时，我能够根据 Promise 是履行还是拒绝来设置组件局部变量。现在看来我只是将请求“移交给” redux-saga 并且永远不知道（在调用站点中）它是否已完成，现在我不知道（在我的组件内）它是否成功。

例如，假设我有一个基于承诺的调用，可以获取用户的游戏

getCurrentGamesForUser = (nickname, token) => {
    return logic.getGamesForUser(nickname, token)
      .then(currentGames => {
        this.needToUpdateGamesFlagFromSocketIO = false
        this.setState({currentGames})
        sessionStorage.setItem('currentGames', JSON.stringify(currentGames))
      })
      .catch(({message}) => this.onError(message))
  }

如果我的承诺成功，我将设置标志

this.needToUpdateGamesFlagFromSocketIO

——以及

sessionStorage

变量。

现在，据我了解，我会将其转换为

 getCurrentGamesForUser = (nickname, token) => {
    this.props.dispatch(getCurrentGames(nickname,token))
  }

这效果很好。如果出现错误，该错误将从 saga 发送到商店，我的组件将反映该错误。

但是我该如何处理本地标志和会话存储呢？我也需要将这些添加到商店吗？这似乎是一种混乱的方式，除非我为每个组件都有一个单独的存储，为每个组件都有一个本地存储，这看起来也很混乱。我在这里看到了一些类似主题的讨论，https://github.com/redux-saga/redux-saga/issues/907，但似乎没有答案。我确信我错过了处理所有这些的“redux 方式”，因此欢迎任何指导。

Answer 1

Redux-Saga 旨在将组件外部所有基于操作的触发器卸载到单独的 saga 范围。不幸的是，没有直接的方法来实现您的请求。尽管您提到的 issue 跟踪器中有一些建议的解决方法。

redux-saga 的主要目标是通过将副作用卸载到单独的执行上下文来轻松管理副作用。权衡之一是沟通只能通过

component -> action -> saga -> store -> component

进行。因此，对于上述要求，我认为使用 redux-saga 会适得其反。

也就是说，您始终可以将

redux-saga

与其他基于承诺/回调的方法（例如

redux-thunk

）结合使用。

上述用例更适合基于回调的实现，而完全隔离 Redux 的副作用可以通过

redux-saga

很好地处理。