首页 文章

redux-observable派遣行动

提问于
浏览 次
0

我需要使用 redux-observable 以某种顺序发送一些动作，但是，它只需要最后一次动作即可发送 . 请看例子：

export const fetchClientsEpic = (action$, { dispatch }) =>
  action$
    .ofType(fetchClients)
    .mapTo(fetchClientsPending(true))
    .mergeMap(() => {
      return ajax
        .getJSON('some/get/clients/api')
        .map((clients: IClient[]) => {
          return fetchClientsSuccess(
            map(clients, (client, index) => ({
              key: index,
              ...client,
            })),
          );
        });
    });

fetchClientsSuccess 是与客户一起发送的，但 fetchClientsPending 没有，我完全不明白为什么 . 我可以使用 dispatch ，因为我在params中得到它，但我觉得这不是好的解决方案（？） . 我应该在流中完成它 . 我开始使用RxJs和redux-observable . 有可能吗？

redux redux-observable

1 回答

  • 2

    运算符是Observables的链，其中一个流的输入是另一个流的输出 . 因此，当您使用 mapTo 时，您将一个动作映射到另一个动作 . 但是你的 mergeMap 映射了Pending动作并将其映射到执行ajax等的其他内部Observable，从而有效地抛弃了Pending动作 . 因此，将RxJS看作是数据流经的一系列管道（流）

    虽然没有银弹，但在这种特殊情况下，您可以通过在内部Observable的末尾使用 startWith 来完成您想要实现的目标 .

    export const fetchClientsEpic = (action$, { dispatch }) =>
  action$
    .ofType(fetchClients)
    .mergeMap(() => {
      return ajax
        .getJSON('some/get/clients/api')
        .map((clients: IClient[]) => {
          return fetchClientsSuccess(
            map(clients, (client, index) => ({
              key: index,
              ...client,
            })),
          );
        })
        .startWith(fetchClientsPending(true)); // <------- like so
    });

    这实际上与使用 concat 和 of(action) first 相同，只是简写 .

    export const fetchClientsEpic = (action$, { dispatch }) =>
  action$
    .ofType(fetchClients)
    .mergeMap(() => {
      return Observable.concat(
        Observable.of(fetchClientsPending(true)),
        ajax
          .getJSON('some/get/clients/api')
          .map((clients: IClient[]) => {
            return fetchClientsSuccess(
              map(clients, (client, index) => ({
                key: index,
                ...client,
              })),
            );
          })
      );
    });

    也就是说，我建议不要同步调度另一个动作来设置抓取正在等待的状态，而是依赖原始的 fetchClients 动作本身来获得相同的效果 . 你的减速器应该假设，如果看到这样一个动作，那么无论如何仍然会开始取出 . 这样可以节省样板，并且可以帮助您完成微穿孔，因为您不需要经历两次减速器，史诗和重新渲染 .

    虽然没有规则，所以如果你对此有强烈的感觉，那就去吧:)

    回复于

相关问题