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

Question

我是 redux-saga 的初学者，作为一项任务，我认为我会尝试将现有的大型 React 应用程序从 Promises 转换为 redux-saga。我正在取得一些进展，但我遇到的一个问题是，当我使用 Promises 时，我能够根据承诺是履行还是拒绝来设置组件局部变量。现在看来我只是 "hand over" 对 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 way"，因此欢迎任何指导。

Answer 1

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

redux-saga 的主要目标是通过将其卸载到单独的执行上下文来简化副作用的管理。权衡之一是通信只能通过 component -> action -> saga -> store -> component 进行。因此，对于上述要求，我认为使用 redux-saga 会适得其反。

也就是说，您始终可以将 redux-saga 与其他基于承诺/回调的方法结合使用，例如 redux-thunk。

上面的用例更适合基于回调的实现，而完全隔离 redux 的副作用将用 redux-saga 处理得很好。

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

Converting promise-based React app to redux-saga: how do I set React component variables?

javascript

reactjs

redux

redux-saga

redux-store