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

Question

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

例如，假设我有一个基于 Promise 的调用来获取我用户的游戏

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-saga 可以很好地处理完全隔离到 redux 的副作用。