reactjs - 如何等待一个 Action 完成？

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 };

现在在 Angular 中，我只需等待此调用完成并检查该值是 true 还是 false，然后使用 导航到主页角度路由器。

但是我如何在 react 中实现相同的目标。我在示例应用程序中使用 react-router。

我尝试在我调用 this.props.authenticateUser(user) 的地方的 submitHandler 函数中检查 isAuthenticated ，但是问题是，this.props.isAuthenticateUser 未更新并返回false，我已将其设置为我的reducer 中的initialState。

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

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

我知道渲染函数将随着状态的任何变化而被调用。但我就是无法清楚地理解 React。

编辑:为了简洁起见，我没有提供上面的操作创建者和完整的 reducer ，而是仅显示了用于验证用户的 switch case 操作。我的应用程序遵循原始的 redux 架构，包含操作、 reducer 、容器、组件等。

编辑: Github 链接 here

Answer 1

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

1. 不应直接从组件调用 reducer 。您对用户身份验证的调用应该在一个操作内，并且应该从组件中分派(dispatch)该操作。

2. 定义操作时，您可以指定一个属性来定义操作的类型。例如，在本例中，它可以是 type: AUTHENTICATE_USER

3. 操作完成后，redux store 会使用当前状态和操作调用 reducer 。这里，redux状态可以根据action.type(上面的第二个代码片段)进行更新

4. 这是最重要的部分:您的组件需要有一个 mapStateToProps 方法，它将 Redux 状态中的值作为 props 传递到您的组件中。因此，随着状态的变化， Prop 会更新并且组件会重新渲染。要使用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. 还在组件的 render 方法中基于 props.isAuthenticated 进行检查以显示错误消息。

一些可能有用的链接:

https://redux.js.org/basics/data-flow

https://redux.js.org/basics/usage-with-react