使用 connect() 函数将 Redux 状态传递给子路由

2020-10-16 08:00:00 · 飞浪

React Redux 中的每个路由和子路由都可以使用 connect() 方法访问全局状态片段。

介绍

React 使用组件状态，该状态可以在组件中修改，并在连接到父组件时将其传递给子组件。但是，如果组件不相互关联，则此状态不足以管理状态。

Redux 是一个库，允许 React 应用创建全局状态对象，通过使用该状态对象，该对象可在整个应用的任何组件中使用。Redux 状态是 React 应用中全局管理的独立对象。因此，每个路由和子路由都应该能够访问全局状态片段，这可以使用 connect ()方法实现。本指南将演示任何应用子路由如何访问 Redux 状态。

使用 Store 创建 Redux 状态

在任何组件之前，访问 Redux 状态对象。第一步是创建存储，该存储将表示 React 应用中各个组件使用的组合状态对象。

需要安装两个库来配置商店和路线。

      npm install react-redux
npm install react-router-dom
    

然后，按照路由配置路由器。

      import { Route, Switch,  BrowserRouter as Router } from 'react-router-dom';
    

导入路由器后，您需要配置与您的组件相关的各种路由。

      class AppRoutes extends React.Component {
    render() {
        return (
            <Switch>
                <Route exact path={'/'} component={Home} />
                <Route path={'/screen1'} component={Screen1} />
                <Route path={'/screen2'} component={Screen2} />
                <Route path={'/screen3'} component={Screen3} />
                <Route component={NotFoundPage} />
            </Switch>
        );
    }
}
    

根据路由，如果任何组件想要访问 Redux 状态，则需要配置 store。以下是创建 store 的代码。

      // To use createStore function
import { createStore } from 'redux';

const store = createStore(contactApp);
    

然后将存储分配给<Provider>，这允许任何组件访问全局状态对象。

      <Provider store={store}>
    <Switch>
        <Route exact path={'/'} component={Home} />
        <Route path={'/screen1'} component={Screen1} />
        <Route path={'/screen2'} component={Screen2} />
        <Route path={'/screen3'} component={Screen3} />
        <Route component={NotFoundPage} />
    </Switch>
</Provider>
    

提供程序有一个名为store的属性，该属性定义存储并使 Redux 状态在整个应用中可用。您的应用已配置为通过实现路由器以及 Redux 存储来访问 Redux 状态对象。现在，您可以使用connect()函数访问任何状态。

将 Redux 状态访问到子路由

使用提供程序配置存储后，您可以访问状态对象，但可以直接完成；因此，使用 Redux 的附加功能。

React Redux 有一个附加功能，称为connect()，可让你将 React 组件与 Redux 存储连接起来。connect()函数有四个不同的 props：

映射StateToProps
mapDispatchToProps
合并Props
选项

您可以使用 props mapStateToProps提取全局状态并将其用于现有组件。例如，一个表单添加了联系人和另一个显示联系人列表的组件；因此，表单组件是父组件，列表组件是子组件。

App.js

      render() {
    return (
      <>
        <h1>CONTACT APP</h1>
        <section>
          <section>
            <input
              type="text"
              name="message"
              placeholder="Name"
              value={this.state.inputs.message}
              onChange={this.onInput}
            />
            <button onClick={this.addContact}>ADD</button>
          </section>
        </section>
        <hr />
        <TodoList />
      </>
    );
}
    

一个输入控件用于添加联系人姓名。一旦用户提交联系人，操作方法应如下所示。

      addContact = () => {
    // Dispatching the action
    this.props.addContact(this.state.inputs.message);
};
    

有一个名为addContact()的动作，它将联系人姓名作为值并将其传递给动作调用函数，但此示例中将使用mapDispatchToProps 。

      const mapDispatchToProps = dispatch => {
  return {
    addContact: contact => dispatch(addContact(contact))
  };
};
    

到目前为止，您已经创建了一个简单的表单并调用了 Redux 操作，但还没有任何组件来显示添加的联系人列表。

为此，创建一个附加组件，如下所示。

联系列表.jsx

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

class ContactList extends Component {

  renderContacts = () => {
    return this.props.contacts.contacts.map((contact, i) => (
      <section key={i}>
        <div>
          <p className="flex">{contact}</p>
        </div>
      </section>
    ));
  };

  render() {
    return (
      <>
        <section>
          <section>
            <h2>CONTACTS</h2>
            <hr />
            {this.props.contacts.contacts &&
            this.props.contacts.contacts.length > 0 ? (
              this.renderContacts()
            ) : (
              <span>Contacts not found</span>
            )}
          </section>
        </section>
      </>
    );
  }
}

const mapStateToProps = state => ({ contacts: state.contacts })

export default connect(mapStateToProps)(ContactList);
    

在上面的组件中，创建了一个名为renderContacts()的函数，该函数使用this.props.contact。这意味着来自全局状态对象的数据在子组件中使用。

下面的语句至关重要，从存储中提取所需的状态。

      const mapStateToProps = state => ({ contacts: state.contacts })
    

在上面的语句中，state.contacts包含全局状态对象的一部分，并被分配给名为contacts的本地 props ，因此当您想要从全局状态访问联系人时，您可以使用现有组件中的this.props.contacts 。

最后一步是将mapStateToProps分配给connect()函数，以便 props 从状态中找到合适的状态对象。

      export default connect(mapStateToProps)(TodoList);
    

结论

Redux 库允许我们实现可从应用程序中的任何组件访问的全局状态对象；因此，connect()函数允许应用程序中的任何子路由从存储中提取所需的状态对象。

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

_查看原文

技术指南

阅读全文

使用 connect() 函数将 Redux 状态传递给子路由

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

class AppRoutes extends React.Component { render() { return ( <Switch> <Route exact path={'/'} component={Home} /> <Route path={'/screen1'} component={Screen1} /> <Route path={'/screen2'} component={Screen2} /> <Route path={'/screen3'} component={Screen3} /> <Route component={NotFoundPage} /> </Switch> ); } }

<Provider store={store}> <Switch> <Route exact path={'/'} component={Home} /> <Route path={'/screen1'} component={Screen1} /> <Route path={'/screen2'} component={Screen2} /> <Route path={'/screen3'} component={Screen3} /> <Route component={NotFoundPage} /> </Switch> </Provider>

render() { return ( <> <h1>CONTACT APP</h1> <section> <section> <input type="text" name="message" placeholder="Name" value={this.state.inputs.message} onChange={this.onInput} /> <button onClick={this.addContact}>ADD</button> </section> </section> <hr /> <TodoList /> </> ); }

import React, { Component } from "react"; import { connect } from "react-redux"; class ContactList extends Component { renderContacts = () => { return this.props.contacts.contacts.map((contact, i) => ( <section key={i}> <div> <p className="flex">{contact}</p> </div> </section> )); }; render() { return ( <> <section> <section> <h2>CONTACTS</h2> <hr /> {this.props.contacts.contacts && this.props.contacts.contacts.length > 0 ? ( this.renderContacts() ) : ( <span>Contacts not found</span> )} </section> </section> </> ); } } const mapStateToProps = state => ({ contacts: state.contacts }) export default connect(mapStateToProps)(ContactList);