В Redux-Observable / RxJS как вы излучаете комбинацию действий и вспомогательных функций

Question

После того как пользователь прошел аутентификацию, мне нужно вызвать 2 функции (AsyncStorage.setItem и setAPIAuthorization), а затем 2 действия с избыточностью (LOAD_USER и SET_SESSION_USER). Как бы я достиг этого, основываясь на следующей попытке? Или я должен создать избыточные действия для обеих функций?

const loginUserEpic = (action$, state$) =>
  action$.pipe(
    ofType('LOGIN_USER'),
    mergeMap(() =>
      from(axios.post(`/auth`, {})).pipe(
        mergeMap(response =>
          of(
            AsyncStorage.setItem('id_token', response.data.token),
            setAPIAuthorization(response.data.token),
            {
              type: 'LOAD_USER'
            },
            {
              type: 'SET_SESSION_USER',
              user: response.data.user
            }
          )
        ),
        catchError(error => console.log(error))
      )
    )
  );

Благодаря Anas ниже, вот обновление, которое я использую для достижения того, чего я хочу. Пока успешно. После сохранения id_token он включается в заголовок любых последующих вызовов API. По этой причине я должен убедиться, что id_token сохранен перед вызовом LOAD_USER, который является вызовом API.

const loginUserEpic = (action$, state$) =>
  action$.pipe(
    ofType('LOGIN_USER'),
    mergeMap(() =>
      from(axios.post(`/auth`, {})).pipe(
        mergeMap(response => {
          return new Observable(observer => {
            AsyncStorage.setItem('id_token', response.data.token);
            setAPIAuthorization(response.data.token);
            observer.next(
              {
                type: 'LOAD_USER'
              },
              {
                type: 'SET_SESSION_USER',
                user: response.data.user
              }
            );
          });
        }),
        catchError(error => console.log(error))
      )
    )
  );

Answer 1

Другой простой способ - использовать switchMap

switchMap(() => [
  {
    type: 'LOAD_USER',
                },
  {
    type: 'SET_SESSION_USER',
    user: response.data.user,
  }
])

Он автоматически оборачивает результат в наблюдаемые, если это массив. Таким образом, вам больше не нужно of() это. Я часто использую его в своем проекте.

Answer 2

Настройка хранения сессии является побочным эффектом. Так что лучше сделать это в кране ,

Ваша эпопея должна возвращать только действия в качестве вывода (действия In, действия Out). Если вы сделаете это таким образом, то приставка будет жаловаться на то, что вы не возвращаете простые действия.

Я все еще буду создавать создателя действий для { type: 'LOAD_USER' } и { type: 'SET_SESSION_USER'} только потому, что он чище.

const loginUserEpic = (action$, state$) =>
  action$.pipe(
    ofType('LOGIN_USER'),
    mergeMap(() =>
      from(axios.post('/auth', {})).pipe(
        tap((response) => {
          AsyncStorage.setItem('id_token', response.data.token)
          setAPIAuthorization(response.data.token)
        }),
        mergeMap(response =>
          of(
            {
              type: 'LOAD_USER',
            },
            {
              type: 'SET_SESSION_USER',
              user: response.data.user,
            }
          )
        ),
        catchError(error => console.log(error))
      )
    )
  )