react-native - 使用 redux observable 显示警报框

Question

我在我的 React Native 应用程序中使用 redux observable，如果凭据无效，我想在我的登录屏幕上显示一个 React Native 警报对话框。我可以在我的史诗中发出警报，但在史诗中我只能返回一个可观察的，那么如何使用 redux observable 来实现这一点？

• 更新01

验证码:

export const signInFailure = (payload) => {
  return {
    type: SIGN_IN_FAILURE,
    payload
  }
};


const signInSuccessActions = (payload) => {
return Observable.concat(
    Observable.of({type: SIGN_IN_SUCCESS, payload}),
    Observable.of({type: 'Navigation/NAVIGATE', routeName:          'MainTabView'})
);
 };


export const signInRequestEpic = action$ =>
action$.ofType(SIGN_IN_REQUEST)
    .mergeMap(action => AuthService.login(action.email,  action.password)
        .flatMap(payload => payload.status === 200 ?  signInSuccessActions(payload) : signInFailure(payload))
        .catch(error => Observable.of({
            type: SIGN_IN_FAILURE,
            error
        }))
    );

在 React Native 中使用警报 api 只需 1 行

import {Alert} from "react-native";

 Alert.alert(
        'Invalid',
        'Email or password incorrect',
    )

Answer 1

旁注:大多数问题实际上只是普通的 RxJS questions in disguise ，不特定于 redux-observable；它几乎将所有事情都推迟到常规 RxJS。如果您能够将问题推广到普通的 RxJS，而无需使用 redux-observable 术语，那么找到答案通常会更容易，因为 StackOverflow、Gitter 等上有大量的 RxJS 资源以及用户可以提供帮助。

<小时/>

有几种方法可以做到这一点。

在现有的 Epic 中执行此操作

您可以使用.do() operator产生不以任何方式影响操作流的副作用——比如只显示一个警报框而不进行任何确认。

export const signInRequestEpic = action$ =>
  action$.ofType(SIGN_IN_REQUEST)
    .mergeMap(action =>
      AuthService.login(action.email, action.password)
        .flatMap(payload => payload.status === 200
          ? signInSuccessActions(payload)
          : signInFailure(payload)
        )
        .do({
          error: ({ payload }) =>
            Alert.alert('Invalid', `Sign in failed: ${payload.message}`)
        })
        .catch(error => Observable.of({
          type: SIGN_IN_FAILURE,
          error
        }))
    );

您也可以在返回SIGN_IN_FAILURE流之前在.catch()中执行此操作，但我个人喜欢将副作用分开以使它们脱颖而出更多的。但这是:

.catch(error => {
  Alert.alert('Invalid', `Sign in failed: ${error.message}`);

  return Observable.of({
    type: SIGN_IN_FAILURE,
    error
  });
})

在新史诗中进行

如果您希望从 signInRequestEpic 中抽象出此副作用，您可以创建另一个史诗，它仅监听失败，并使用 .do() 显示警报然后使用 .ignoreElements() 运算符忽略匹配的操作，因为此史诗不需要发出任何内容。

export const signInFailureEpic = action$ =>
  action$.ofType(SIGN_IN_FAILURE)
    .do(({ payload }) =>
      Alert.alert('Invalid', `Sign in failed: ${payload.message}`)
    )
    .ignoreElements();

<小时/>

您应该使用哪一个？这取决于。如果您希望在显示警报之前更新您的 Redux 存储，那么您肯定会希望使用单独的 Epic。对于第二个史诗，SIGN_IN_FAILURE 操作将在 signInFailureEpic 收到之前到达您的 reducer ，因此它们将被更新。如果您在 signInRequestEpic 中执行此操作，则该操作尚未到达 reducer 。

可以进行商店更新并处于同一个史诗中，但它开始变得毛茸茸的，所以我不会展示如何;)