在 React-redux 中对状态实施条件操作

2020-10-21 08:00飞浪

介绍

使用企业级 React 应用时，您必须处理复杂的状态管理。状态的复杂性会随着应用的扩展而增加。您可以使用状态管理库来避免此类应用中与状态相关的问题。状态管理库会为您完成所有繁重的工作，并为您提供声明性 API 来管理整个应用中的状态。

Redux 是 React 的一个流行状态管理库。Redux 可帮助您以可预测的行为管理状态，从而有助于实现长期代码可维护性。在本指南中，您将学习如何使用 Redux 根据当前全局存储中的值有条件地分派操作。

理解动作

操作是将数据或信息负载从您的组件发送到全局存储对象的普通对象。下面是一个示例操作对象，它表示用于验证用户身份的操作。

      const AUTHENTICATE = `LOGIN_USER`;
    

      {
    type: AUTHENTICATE,
    payload: {
        email: 'john@doe.com',
        password: 'john123'
    }
}
    

type键是操作的唯一必需属性；其他属性由您决定，可以灵活地满足您的应用要求。最好在每个操作中发送尽可能少的数据并避免嵌套对象。

从组件调度 Action

现在您已经了解了 Redux 操作，在本节中，您将学习如何从组件分派操作。

举个例子，考虑一个处理表单验证和提交的LoginForm组件；一旦表单成功提交，它就会使用onSubmit属性将值传递给父组件，即LoginPage组件。当表单提交时，您需要分派AUTHENTICATE操作，它将负责身份验证过程。

      import React from "react";

class LoginPage extends React.Component {
  constructor(props) {
    super(props);

    this.handleFormSubmit = this.handleFormSubmit.bind(this);
  }

  handleFormSubmit(values) {
    // dispatch AUTHENTICATE action
  }

  render() {
    return (
      <div>
        <LoginForm onSubmit={this.handleFormSubmit} />
      </div>
    );
  }
}

export default LoginPage;
    

现在要从LoginPage组件分派操作，您需要使用react-redux库中的connect方法。

      import React from "react";
import { connect } from "react-redux";

class LoginPage extends React.Component {
  constructor(props) {
    // ...
  }

  handleFormSubmit(values) {
    // dispatch AUTHENTICATE action
    this.props.dispatch({
      type: AUTHENTICATE,
      payload: values,
    });
  }

  render() {
    // ...
  }
}

export default connect()(LoginPage);
    

connect方法是一个增强函数，它将组件与全局存储连接起来，并在 prop 中注入一个 dispatch 方法。

dispatch方法将 action 对象作为其参数，并将该 action 分派到 Redux 存储。

从组件有条件地调度动作

假设身份验证已在进行中，在这种情况下您不想分派AUTHENTICATE操作。因此，在这里您需要将组件连接到全局存储并检索身份验证状态。您可以通过将 mapStateToProps参数传递给connect()方法来执行此操作。

      const mapStateToProps = (globalState) => {
  const { isAuthenticating } = globalState;
  return { isAuthenticating };
};

export default connect(mapStateToProps)(LoginPage);
    

然后在handleFormSubmit方法中，您可以执行以下操作。

      handleFormSubmit(values) {
    if (!this.props.isAuthenticating)
      this.props.dispatch({
        type: AUTHENTICATE,
        payload: values,
      });
}
    

上述条件将确保仅当isAuthentication状态设置为 false时才会分派AUTHENTICATE动作。

这是完整的代码，供您参考。

      import React from "react";
import { connect } from "react-redux";

class LoginPage extends React.Component {
  constructor(props) {
    super(props);

    this.handleFormSubmit = this.handleFormSubmit.bind(this);
  }

  handleFormSubmit(values) {
    if (!this.props.isAuthenticating)
      this.props.dispatch({
        type: AUTHENTICATE,
        payload: values,
      });
  }

  render() {
    return (
      <div>
        <LoginForm onSubmit={this.handleFormSubmit} />
      </div>
    );
  }
}

const mapStateToProps = (globalState) => {
  const { isAuthenticating } = globalState;
  return { isAuthenticating };
};

export default connect(mapStateToProps)(LoginPage);
    

结论

Redux 让您可以更轻松地预测应用状态和数据流。Redux dev-tools 为您提供“时间旅行”调试，让您可以分派任何过去的操作。

使用 Redux 进行状态管理还有很多内容需要学习。你可以先阅读 Redux文档，它非常简洁，适合初学者。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

曝光29838浏览1596