时间戳

首页 > 解决方案 > 将基于 Promise 的 React 应用程序转换为 redux-saga：如何设置 React 组件变量？

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

问题描述

我是 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 方式”，因此欢迎任何指导。

标签： javascriptreactjsreduxredux-sagaredux-store

解决方案

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

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

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

像上面这样的用例更适合基于回调的实现，而完全隔离到 redux 的副作用可以用redux-saga.

推荐阅读