Question

我正在观看YouTube video中有关Redux的视频教程。我阅读了以下文章，但无法理解如何使用this.props。例如，考虑以下代码片段：

import React, { Component } from 'react';
import { connect } from 'react-redux'
import axios from 'axios';
import { fetchPosts } from '../actions/postActions.js';

class Posts extends Component {
  componentWillMount() {
    this.props.fetchPosts();
  }
  render() {
    const postItems = this.props.posts.map(el => {
      return (
        <div key={el.id}>
        <h3>{el.title} </h3>
        <p>{el.body} </p>
        </div>
      )
    })
    return (
      <div>
      <h1> Posts </h1>
      {postItems}
      </div>
    );
  }
}

const mapStateToProps = state => ({
  posts: state.posts.items
})

export default connect(mapStateToProps, { fetchPosts } )(Posts);

在这里，我们在两个地方使用this.props。第一：

this.props.fetchPosts();

我不确定，但是我相信这是从以下位置调用我们的fetchPosts函数：

import { fetchPosts } from '../actions/postActions.js';

，然后在这里也使用它：

this.props.posts.map(…)

这是current working repository，以防有人要参考该代码。由于道具是从一个方向的父母流向孩子的，所以有人可以在这里解释为什么/为什么使用this.props吗？

Answer 1

Redux本身并不仅限于React，它只是一个通用的全球商店管理库，它鼓励单一的事实来源，并为更稳定和可预测的应用程序使用动作和不变性。

本教程使用的react-redux包是Redux for React的集成，提供了诸如Provider之类的组件和诸如connect之类的HOC。 Provider组件可向其任何子级提供提供 Redux存储，并在子级中将其连接到子级接收Redux存储。提供者。

在这种模式下，您使用connect函数，该函数通常使用两个参数mapStateToProps和mapDispatchToProps，并返回另一个包含组件的函数来提供存储通过道具。

这就是关键– connect通过将所需的Redux商店（在mapStateToProps中指定）的各个部分传递到组件的props，将全局状态映射到props，从而将组件连接到商店，由此得名。调度和动作创建者也是如此。这样，我们可以轻松地为React组件提供访问存储和调度动作以更改全局Redux存储的功能。

在您的示例中，具体使用以下行：

connect(mapStateToProps, { fetchPosts })(Posts);

这会将组件Post连接到全局存储。它还将两个参数传递给connect，已定义的函数mapStateToProps和一个对象，该对象指定要向fetchPosts公开的动作创建者（包含Post）。这些都作为道具传递给Post。

在mapStateToProps中，将全局状态传递给它。它返回一个对象，该对象指定要作为道具映射到Post的全局状态的哪些部分。这就是为什么您可以使用this.props.posts的原因–只是在全局Redux存储中对posts.items的引用。我们还可以使用this.props.fetchPosts，因为它是由Post的第二个参数传递给connect的。

我强烈建议您仔细阅读Redux documentation on integration with React和所有内容。它提供了有关Redux及其关键概念的良好实践的示例和大量指南。另外，有关更多信息，请参见the API documentation for react-redux。

Answer 2

this.props.posts和this.props.fetchPosts来自connect(mapStateToProps, { fetchPosts })。

这是一个React高阶组件。参见：

https://reactjs.org/docs/higher-order-components.html

https://github.com/reduxjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

Answer 3

在Redux中，store本质上是一个对象，用于保存应用程序的顶级state。

所说的state使用actions更新，并使用Provider在整个应用程序中传播。

connect()的React Redux方法利用higher-order components通过props选择性地将数据传输给子级。

总体过程与lifting state up非常相似，不同之处在于，它使开发人员避免了诸如钻探或使用context之类的替代技术带来的大量开销。

使用React Redux时如何使用道具？

3 个答案: