【问题标题】:Redux-observable combineepics not mappingRedux-observable combineepics 不映射
【发布时间】:2017-09-13 23:25:53
【问题描述】:

我是 redux-observables 的新手,我正在尝试结合史诗,但是它并没有像我认为的那样工作。下面的代码使“MENU_TOGGLE”正确切换,并在控制台注销按钮被按下之前延迟,但 LOGIN_REQUEST 不会映射到 LOGIN_SUCCESS。我有以下示例:

import { combineEpics } from 'redux-observable';
import 'rxjs';

const loginRequest = action$ =>
    action$.ofType('LOGIN_REQUEST')
      .delay(1000)
      .mapTo({ type: 'LOGIN_SUCCESS' });

const menuToggle = action$ =>
    action$.ofType('MENU_TOGGLE')
      .delay(1000)
      .subscribe(action => {
          console.log('Button pressed!');
      });

export const rootEpic = combineEpics(
    loginRequest, menuToggle
);

以上只是一个示例,我在单独的文件中有实际代码,但即使这样似乎也不起作用。如果我将其更改为:

export const rootEpic = combineEpics(loginRequest);

然后它会正确触发。只要我向 combineEpics 添加额外的史诗,它就不会再触发史诗了。

我似乎无法弄清楚我可能在哪里犯了错误。非常感谢任何帮助!

【问题讨论】:

  • 只结合menuToggle是否有效?
  • 是的,menuToggle 无论如何都可以工作。当我添加一个应用 mapTo 的史诗时。如果我从 menuToggle 中取出订阅并添加了 mapTo 另一个操作,它会做同样的事情。如果我从 combineEpics 函数中删除一个史诗,两个史诗独立工作,但是当两者都存在时,带有 mapTo 的史诗拒绝工作。

标签: reactjs redux rxjs


【解决方案1】:

问题是menuToggle 史诗正在使用subscribe,而subscribe 完成了动作流,使其他史诗无法再在流上收听。因此,不要使用subscribe,而是使用如下内容:

const menuToggle = action$ =>
  action$.ofType('MENU_TOGGLE')
    .delay(1000)
    .do(action => {
      console.log('Button pressed!');
    })
    .ignoreElements();

您可以阅读此issue 以了解有关如何处理不返回操作的史诗的更多信息。

【讨论】:

  • 那更正了!非常感谢!我没有意识到它结束了流。我是一名 Angular 开发人员,并且即将使用 React,所以这里有很多学习曲线。
  • 祝你好运!虽然 React 的学习曲线比较陡峭,但当你理解了它之后,以后学习任何其他 Web 框架应该没有问题。
猜你喜欢
  • 2021-06-08
  • 2018-08-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-09-23
  • 2012-11-05
  • 2023-04-01
相关资源
最近更新 更多