等待React Redux中的操作完成

Question

我是新手react,redux并且一直在探索它与它的不同之处angular.

我正在尝试做一个简单的登录页面,但我无法达到我想要的效果.从登录表单中获取用户名和密码后,我将其提交如下:

  submitHandler(e){
    e.preventDefault();
    var user = {
      name : this.state.username,
      password: this.state.password
    }
    this.props.authenticateUser(user);
    browserHistory.push('/home');
    this.setState({
      username:'',
      password:''
    })
  }

这里authenticateUser是我的reducer中的一个函数(如下所示),它从已经存在的用户列表中检查,然后检查具有属性的状态isAuthenticated:

 case 'AUTHENTICATE_USER':
        var users = state.userslist;
        var payloadUser = action.payload;
        for (let i = 0; i < users.length; i++) {
            let user = users[i]
            if (user.name === payloadUser.name) {
                return {...state, isAuthenticated: true };
            }
        };
        return {...state, isAuthenticated: false };

现在,在角度,我只是等待这个调用来完成,并检查该值是否是true或false,并使用导航到主页angular-router.

但是,我将如何实现同样的目标react.我react-router在我的示例应用程序中使用.

我试着在我调用的下面检查isAuthenticated我的submitHandler功能this.props.authenticateUser(user),但问题是,this.props.isAuthenticateUser没有更新并返回false,我已经设置为initialState我的reducer中.

请告诉我如何isAuthenticated在authenticateUser函数调用后检查,以便我可以继续我的主页路由.我是否必须使用a promise并等待状态更新redux,然后再次检查？(我知道反应是一种单向路径,它不会那样工作.)

此外,如果我的身份验证失败,如何在登录表单下方显示错误面板.我认为使用错误面板的一个组件isAuthenticated作为输入并检查是否为false以显示(即.在Angular中的ngShow.)但是我担心这样也行不通,因为我的状态不会更新及时.

我知道渲染函数将在状态发生任何变化时调用.但我无法清楚地绕过React.

编辑:为简洁起见,我没有提供动作创建者和上面的完整减速器,而是仅显示用于认证用户的开关案例操作.我的应用程序遵循原始的redux架构,包括动作,减速器,容器,组件等.

编辑: Github链接在这里

Answer 1

我将尝试简要解释数据流在Redux应用程序中的工作原理:

1. 不应直接从组件调用reducer.您对身份验证用户的调用应该在操作内部,这应该是从组件调度的内容.

2. 定义操作时,可以指定属性以定义操作的类型.例如,在这种情况下,它可能是type: AUTHENTICATE_USER

3. 完成操作后,redux存储将调用reducer调用当前状态和操作.这里,redux状态可以根据action.type(上面的第二个代码片段)更新

4. 这是最重要的部分:您的组件需要有一个mapStateToProps方法,将Redux状态中的值作为props传递到组件中.因此,当状态发生变化时,道具会更新,组件会重新渲染.要使用mapStateToProps,您需要从react-redux库实现连接.(https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)

为了实现你想要的,这就是我的建议:

1. 在组件的componentWillReceiveProps方法中,检查props.isAuthenticated并使用context.router.push()导航用户是否经过身份验证.

2. 还要根据props.isAuthenticated组件的render方法进行检查以显示错误消息.

一些可能有用的链接:

http://redux.js.org/docs/basics/DataFlow.html

http://redux.js.org/docs/basics/UsageWithReact.html