reactjs - react-redux-firebase 登录承诺在更新身份验证状态之前解决，导致渲染问题

Question

我正在使用 redux-form、react-redux-firebase 以及 react-router-redux 和 react-router。

当使用 redux-form 连接表单登录用户时，在 onSubmit 回调函数中，我使用的是来自withFirebaseHOC 的 react-redux-firebase 函数，称为props.firebase.login(). 在这个承诺的回报中，我试图使用 react-router 导航到我的“受保护”视图。

这一切都很好，看起来像这样：

    export default withFirebase( 
        connect(mapStateToProps, mapDispatchToProps)(
            reduxForm({
                form: SINGLE_PAGE_FORMS.login, 
                onSubmit: (values, dispatch, props) => {
                    const { firebase } = props;
                    const { username: email, password } = values;

                    firebase.login({
                        email,
                        password,

                    }).then(response => {
                        if(!!response) {
                            dispatch(
                                openNotificationCenterAC({ message: 'Successfully logged in!', messageType: MESSAGE_TYPE_SUCCESS })
                            );

                            // The problem here with login is that the Private Route has not yet seen the Uid update and therefore 
                            // won't load a private route. I need to know the UID is in state before navigating to dashboard.
                            dispatch( push( ROUTE_OBJS.SECURED[ROUTES.DASHBOARD].path ) );
                            dispatch( reset(SINGLE_PAGE_FORMS.login) );
                        }

                    }).catch(error => {
                        dispatch(
                            openNotificationCenterAC({ message: error.message, messageType: MESSAGE_TYPE_ERROR })
                        );
                    });
                },

            })(LoginContainerView)
        )
    );

麻烦（如评论中所见）是我（今天）已经切换到使用一种非常酷的新方法将我的一些路线设为私有。我使用此处链接中的示例来创建此概念。

我的私有组件如下所示：

export default class PrivateRouteView extends Component {

    render() {
        const {
            key,
            auth,
            path,
            renderRoute,
            showErrorMessage,

        } = this.props;

        const { uid } = auth;

        return (
            <Route
                exact
                key={key}
                path={path}
                render={
                    (!!uid && isLoaded(auth) && !isEmpty(auth)) ? renderRoute : 
                        props => {

                            return (
                                <Redirect
                                    to={{
                                        pathname: '/login',
                                        state: { from: props.location }
                                    }} />
                            );
                        }
                } />
        );
    }
}

这里的auth道具来自withFirebaseHOC 注入。它附在this.props.firebase.auth.

问题

.then每当我成功登录时，都会在 promise 的函数中将用户数据返回给我firebase.login()......当我到达 .push 导航的调度时，PrivateRoute 已经重新渲染而没有新的 auth 对象并且永远不会重新呈现。

我可以通过并观看它。它去：

1. 登录成功
2. 进入.then函数
3. 通知用户登录成功
4. 将导航更改为仪表板视图
5. PrivateRoute 组件重新渲染并看到没有 UID 或 auth
6. firebase.login承诺完全解决
7. 应用程序状态更新完成，firebase.auth 现在有 Uid 和所有其他配置文件/身份验证对象处于状态
8. react-router BrowserRouter的容器，Switch和Route的运行正常
9. 附加到此容器的视图重新渲染得很好，直到我返回 PrivateRoute 组件的函数
10. PrivateRoute 渲染方法永远不会在第二次渲染中达到，firebase.login用户数据最终进入 firebase.auth 对象状态。所以现在我被授权了，但是由于没有渲染，它永远不会看到新的身份验证对象......

标签： reactjsfirebasereduxreact-router-reduxreact-redux-firebase