Javascript 有没有办法在RxJS/Redux observable中实现非Redux操作？

成功登录后，我尝试在获取用户配置之前将令牌存储在本地存储中。目前，我只是从

mergeMap

中存储令牌，然后在return语句中获取配置。但是，我非常确定有一种方法可以使用

concat

或

concatMap

按顺序调用存储和获取函数

const authEpic = action$ =>
  action$.pipe(
    ofType('auth/AUTHENTICATION_SUCCESS'),
    mergeMap(action => {
      const { jwt } = action.payload;

      localStorage.setItem('token', jwt);

      return of({
        type: 'user/FETCH_CONFIG'
      });
    })
  );

const authEpic = action$ =>
  action$.pipe(
    ofType('auth/AUTHENTICATION_SUCCESS'),
    tap(({ payload: { jwt } }) => {
      localStorage.setItem('token', jwt);
    }),
    mergeMap((action) => (of({
      type: 'user/FETCH_CONFIG'
    }))
  );

下面是我的一次尝试，但没有成功。虽然在这种情况下，可能有其他方法来处理从组件中存储和获取数据，但我想知道这种模式在其他情况下应该如何工作

const authEpic = action$ =>
  action$.pipe(
    ofType('auth/AUTHENTICATION_SUCCESS'),
    mergeMap(action => {
      const { jwt } = action.payload;

      return concat(
        localStorage.setItem('token', jwt),
        of({ type: 'user/FETCH_CONFIG'})
      );
    })
  );

---

也许您可以尝试使用

last（）

操作符，当序列中的每个项都完成时，Concat将发出信号，这就是它不工作的原因

  reuturn concat(
    of(localStorage.setItem('token', jwt)),
    of({ type: 'user/FETCH_CONFIG'})
  ).pipe(last());

---

我将使用您在问题中所述的第一种方法，因为

localStorage.setItem（）

是同步的，因此在返回

FETCH\u CONFIG

操作之前，始终会调用它

但是，如果您正在寻找其他方法，我建议您在返回

FETCH\u CONFIG

操作之前，使用

tap（）

操作符分离逻辑。这还将确保按顺序调用这两个操作

const authEpic = action$ =>
  action$.pipe(
    ofType('auth/AUTHENTICATION_SUCCESS'),
    mergeMap(action => {
      const { jwt } = action.payload;

      localStorage.setItem('token', jwt);

      return of({
        type: 'user/FETCH_CONFIG'
      });
    })
  );

const authEpic = action$ =>
  action$.pipe(
    ofType('auth/AUTHENTICATION_SUCCESS'),
    tap(({ payload: { jwt } }) => {
      localStorage.setItem('token', jwt);
    }),
    mergeMap((action) => (of({
      type: 'user/FETCH_CONFIG'
    }))
  );

但是，如果确实要使用

concat（）

，则需要将

localStorage.setItem（）

操作包装在

of（）

中，以将其转换为可观察的，因为

concat（）

要求所有成员都是可观察的，并且需要等待第一次订阅（

localStorage.setItem（）

）在第二个（

FETCH\u CONFIG

）开始之前完成

const authEpic = action$ =>
  action$.pipe(
    ofType('auth/AUTHENTICATION_SUCCESS'),
    mergeMap(action => {
      const { jwt } = action.payload;

      return concat(
        of(localStorage.setItem('token', jwt)),
        of({ type: 'user/FETCH_CONFIG'})
      );
    }),
  );

---

concat

用于按照前一个完成的顺序执行可观测值

检查来自

你可以把concat想象成ATM机上的一条线路，下一笔交易（订阅）在前一笔交易完成后才能开始

在您的示例中，我认为您不需要这些操作符中的任何一个，因为您在流中没有执行任何异步操作

您只需使用以下命令更改代码：

action$.pipe(
  ofType('auth/AUTHENTICATION_SUCCESS'),
  tap(action => localStorage.setItem('token', action.payload)),
  mapTo({ type: 'user/FETCH_CONFIG'})
);

---

你的第一个方法没有问题though@FanCheung谢谢是的，在这种情况下它可以正常工作，但是你知道在这种情况下如何使用concat吗？在其他情况下，我需要在最终操作之前调用多个函数，因此创建一个序列是理想的。这真的取决于这些函数是同步还是异步的？太棒了，谢谢。很高兴知道

tap

可以这样使用。