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

时间:2018-11-27 17:11:50

标签: javascript reactjs redux redux-saga redux-store

我是redux-saga的初学者,作为一个任务,我认为我会尝试将现有的大型React应用程序从Promises转换为redux-saga。我正在取得一些进展,但是我遇到的一个问题是,当我使用Promises时,我能够根据诺言是否实现来设置组件局部变量。现在看来,我只是将请求“移交给” 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))
  }

,这很好。如果有错误,它将从传奇中发送到商店,而我的组件将对此进行反映。

但是我该如何处理本地标志和会话存储?我还需要将这些添加到商店吗?除非我为每个组件都有一个单独的存储,为每个组件有一个本地存储,否则这似乎很麻烦。我在这里https://github.com/redux-saga/redux-saga/issues/907看到了关于类似主题的一些讨论,但似乎没有答案。我确定我会错过处理所有这些问题的“冗余方式”,因此欢迎您提供任何指导。

1 个答案:

答案 0 :(得分:1)

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

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

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

如上所述的用例更适合基于回调的实现,而使用redux-saga可以很好地将副作用完全隔离到redux。