react-native - 在 redux-saga 中处理异步操作的最佳实践，因此使用基于 redux reducer 的 react-navigation 更改屏幕

Question

我正在使用 redux-saga 来处理异步操作，例如从我们的服务器获取数据。

为此，我在我的屏幕上发送操作。所以我想改变导航到另一个屏幕或在屏幕上显示错误。

我们可以通过以下方式做到这一点：

解决方案1：

例如，在登录屏幕中，我执行以下操作：

login.js 屏幕：

// After touch login button:
onSubmit: (values) => {
  // formik on submit method
  dispatch(login({ username: values.username, password: values.password }));
},

useEffect(() => {
    if (!loading && tokens && tokens.access_token && !error.status) {
      // navigate to dashboard screen
      navigation.navigate('Dashboard');
    } else if (!loading && !(tokens && tokens.access_token)
    && (error && error.code && error.code === 'some_code')) {
      // user not activated yet, so go to verification screen
      navigation.push('Verification', { username: values.username });
    }
  }, [loading, tokens, error]);

这种方法对我有用，但我认为这不是最佳做法。

解决方案 2： 另一种解决方案，我们可以在屏幕中发送一个函数并将其传递给登录操作，这样当 saga 操作完成时，我们可以调用该回调。

这个解决方案不适合我，因为我们应该发送带有动作有效负载的新参数并再次将其发送到 saga 并在 saga 中调用它，我认为这不是最好的方法。

formSubmitted = (response) => {
const {data, status} = response;
if (status === 200) {
      // navigate to dashboard screen
      navigation.navigate('Dashboard');
    } else if (!loading && !(tokens && tokens.access_token)
    && (data.code === 'some_code')) {
      // user not activated yet, so go to verification screen
      navigation.push('Verification', { username: values.username });
    }
}

// After touch login button:
onSubmit: (values) => {
  // formik on submit method
  dispatch(login({ username: values.username, password: values.password }));
},


// saga.js
const response = yield axios.post(login, params)
// sth like this to call the callback
yield call(payload.callback, response)

解决方案3： 我们可以使用react-navigation navigator，例如这个链接：https ://reactnavigation.org/docs/navigating-without-navigation-prop/

但是我想单独处理我的应用程序问题，并且我想在屏幕而不是传奇中的屏幕之间导航。

你怎么看这个问题？你是怎么处理的？

标签： react-nativereduxreact-navigationredux-saga