Question

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

当使用redux-form连接表单登录用户时，在onSubmit回调函数中，我使用withFirebase HOC中名为props.firebase.login()的react-redux-firebase函数。在这个承诺的回归中，我试图使用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)
        )
    );

麻烦（如评论中所示）是我已经切换（今天）使用一种非常酷的新方式使我的一些路线变为私有。我使用this link here中的示例创建了这个概念。

我的私有组件如下所示：

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道具来自withFirebase HOC注射。它附加到this.props.firebase.auth。

问题

每当我成功登录时，在.then承诺的firebase.login()函数中返回给我的用户数据...当我发送.push导航时，私有路由器在没有新的auth对象的情况下重新渲染，并且永远不会重新渲染。

我可以一步一步地看着它。它是：

登录成功
进入.then功能
通知用户登录成功
将导航更改为信息中心视图
PrivateRoute组件重新渲染并看到没有UID或auth
firebase.login承诺完全解决了
应用程序状态更新完成，firebase.auth现在具有Uid和状态中的所有其他profile / auth对象
容器到反应路由器BrowserRouter，交换机和路由正常运行
附加到此容器的视图重新呈现正常，直到返回PrivateRoute组件的函数
永远不会在第二个渲染上达到PrivateRoute渲染方法，即firebase.login用户数据最终使其进入firebase.auth对象状态。所以现在我被授权，但由于没有渲染，它永远不会看到新的auth对象......

react-redux-firebase登录承诺在更新auth状态之前解析，导致渲染问题

0 个答案: