javascript - 将基于 Promise 的 React 应用程序转换为 redux-saga : how do I set React component variables?

标签 javascript reactjs redux redux-saga redux-store

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

在这里,如果我的 promise 成功,我将设置标志 this.needToUpdateGamesFlagFromSocketIO 以及 sessionStorage 变量。

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

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

这工作得很好。如果出现错误,该错误将从传奇发送到商店,我的组件将反射(reflect)该错误。

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

最佳答案

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

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

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

诸如上述的用例更适合基于回调的实现,而 redux 的副作用的完全隔离可以通过 redux-saga 很好地处理。

关于javascript - 将基于 Promise 的 React 应用程序转换为 redux-saga : how do I set React component variables?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53504803/

相关文章:

JavaScript - 从匿名函数返回 (varScope)

javascript - 如何使属性动态化(在执行代码之前未知)?

javascript - 定期触发 React 效果

reactjs - Redux:数据 `sanitization` 的脂肪 Action 创造者与脂肪减少者?

javascript - 为什么要求总是返回带有新内部引用的新对象

javascript - 安装 HTTPS 后网站丢失 javascript 和布局

javascript - 在 JavaScript 中更新 JSON 数据

javascript - 如何在不使用 id 的情况下删除 React 功能组件中的列表项

javascript - ReactJS + Redux : Where to properly include CSS and index. html 文件?

Angular 2 : Thoughs about HMR and @ngrx/store