Question

我设置了几条路线：

import createHistory from 'history/createMemoryHistory';
import { NativeRouter, Route } from 'react-router-native';

<NativeRouter history={createHistory()}>
  <View style={styles.container}>
    <Route exact path='/' component={Home}/>
    <Route path='/page1' component={Page1}/>
  </View>
</NativeRouter>

现在，在我的Home类中以编程方式更改路径很简单，例如：

this.props.history.push('/page1');

但是在我正在使用Redux进行异步操作的情况下：

export function login(email, password) {

    return function(dispatch) {

        dispatch(setAuthBusy(true));

        return auth.signIn(email, password)
        .then(function (user) {
            dispatch(setAuthBusy(false));
            dispatch(setUser(user));

            // !CHANGE ROUTE HERE!

        })
        .catch(function (err) {
            dispatch(setAuthBusy(false));
            dispatch(setAuthError(err.message));
        });
    };

}

在这种情况下，您可以看到它是一个对用户进行身份验证的登录操作，并且只有在用户成功通过身份验证后才会将路由更改为/page1。

我有一种感觉，在异步操作中更改路由不是正确的方法，所以我很欣赏一些关于应用程序的一般架构和流程的建议。谢谢！

Answer 1

如果您开始处理异步操作，则应该查看redux-thunk中间件。

使用redux-thunk，您可以执行以下操作：

class Home extends React.Component {

  this.onLogin = () => {
    dispatch(login('toto', 'toto')).then(() => {
      this.props.history.push('/page1');
    })
  }

}

这意味着您的案例中的路由更改可以由组件本身管理。

希望有所帮助。

在异步操作后，使用React Router更改React Native中的路由

1 个答案: