代码之家 › 专栏 › 技术社区 › Jwan622

React Redux中的actionCreator、props和component是如何连接的?

react-redux redux reactjs

Jwan622 · 技术社区 · 6 年前

我有这个密码:

import React, { Component } from 'react';
import { connect } from 'react-redux'; //this is a single connect property
import { selectBook } from '../actions/index';
import { bindActionCreators } from 'redux';

class BookList extends Component {
  renderList() {
    return this.props.books.map(book => {
      return (
        <li key={book.title} className="list-group-item"> {book.title} </li>
      );
    });
  }

  render() {
    return (
      <ul className="list-group col-sm-4">
        {this.renderList()}
      </ul>
    )
  }
}

function mapStateToProps(state) {
  return {
    books: state.books
  }
}

function mapDispatchToProps(dispatch) {
  // Whenver selectBook is called, the result should be passed to all of the reducers.
  // selectBook value is an actionCreator, a function.
  return bindActionCreators({ selectBook: selectBook }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(BookList)

和

export function selectBook(book) {
  console.log("A book has been seelcted:", book.title)
}

我不明白的是:

connect(mapStateToProps, mapDispatchToProps)(BookList)

怎么回事?此部分是否负责使组件可以使用状态和分派方法 BookList 是吗?

此函数的作用是:

function mapDispatchToProps(dispatch) {
  // Whenver selectBook is called, the result should be passed to all of the reducers.
  // selectBook value is an actionCreator, a function.
  return bindActionCreators({ selectBook: selectBook }, dispatch)
}

这些是内置的redux函数吗他们要回什么怎么回事?是什么 dispatch 是吗?

价值 selectBook 右边是函数对吧所以我猜它会被调用,返回值会通过dispatch方法流经reducer?但那是什么 bindActionCreators 做什么?

如何在组件内部提供道具 书单 ?

1 回复 | 直到 6 年前

devserkan 6 年前

你有太多的问题,我们很难解释,这里发生的事情可能会让你更加困惑。我强烈建议你看Redux创作者的两段视频:

Getting started with Redux 和 Idiomatic Redux

这些视频解释了什么是Redux,它的各个部分是如何组合在一起的所以,在学习其他教程之前,首先要了解redux本身。

还有,雷德克斯 official documentation 太好了,如果你把它和视频放在一起,对你的学习会很有帮助。

不过,还是让我回答你的问题吧。

第一个问题

我不明白的是:

connect(mapStateToProps, mapDispatchToProps)(BookList)

怎么回事这一部分是否负责组件帐簿列表可用的分派方法?

回答

connect 以下由提供 react-redux 包装,不是 redux 本身。它是一个帮助器高阶函数,用于打开组件的状态和动作创建者所以,你猜对了这就是人们通常如何将其组件连接到存储以获取状态和分派(使用动作创建者)。

第二个问题

function mapDispatchToProps(dispatch) {
  // Whenver selectBook is called, the result should be passed to all of the reducers.
  // selectBook value is an actionCreator, a function.
  return bindActionCreators({ selectBook: selectBook }, dispatch)
}

这些是内置的redux函数吗他们要回什么?是什么继续吗什么是调度?

右边的值selectBook是一个函数,对吗所以我想它被调用,返回值将流经减速机通过派遣方式?但是bindActionCreators在做什么呢?

如何在组件列表中提供道具?

回答

不,它们不是像我在第一个答案中解释的那样内置在redux函数中。 mapStateToProps 打开组件的状态并将其作为道具馈送所以,如果你用 连接 和 地图状态 你得到这个状态作为道具在你的例子中 books 从全局状态中声明并将其打开为 书 到你的组件然后这个组件得到这个 this.props.books .

mapDispatchToProps 将动作创建器功能作为道具打开到组件有几种方法可以使用这个, bindActionCreators 是其中之一,但实际上你不需要它。如果在将动作创建者分派或传递给不知道redux的子组件时需要状态,那么这有助于获取状态。所以, BindActionCreators 不是一个好的开始 地图调度程序 .

基本上是这样的:

const mapDispatchToProps = dispatch => ({
  someFunction: () => dispatch(someFunction())
})

你在这里打开你的 someFunction() 动作创建者将组件作为名称 someFunction 是的。你可以用不同的名字,或者你可以在这里做其他的工作 dispatch 根据这个你的动作创造者。但是在这个例子中,你没有做任何额外的事情,只是发送动作创建者所以,这里有一个速记:

const mapDispatchToProps = {
    someFunction,
}

是的,在这种情况下,这也是一样的。甚至还有一个更短的:

connect(mapStateToProps, {someFunction})(Component)

不使用 地图调度程序 你可以像这样使用你的动作创造者,然后在你的组件中获得道具。

另外(是的,还有更多:))事件不使用connect中的任何函数参数,我们可以使用action creators。

connect()(Component)
connect(mapStateToProps)(Component)

如果我们跳过 地图调度程序 就像上面的方法一样, 派遣 自动传递给组件道具。然后,我们可以像其他道具一样使用它来发送我们的动作创建者:

this.props.dispatch(someFunction())

你的例子是这样的(我知道这个应用,所以我在这里使用的是real action creator的例子)。

你可以写 地图调度程序 这样地:

const mapDispatchToProps = dispatch => ( {
  selectBook: book => dispatch( selectBook( book ) ),
} );

给你用 selectBook 作为 this.props.selectBook 在您的组件中并发送操作你可以看到你的道具触发了一个函数,它在这里分派你真正的动作创造者请记住,动作创建者返回对象,这些对象需要被调度才能通过reducer所以,您正在发送操作创建者(它由 精选集 .

现在,和 BindActionCreators 不使用它真正的优点,你可以把它写成:

const mapDispatchToProps = dispatch => (
    bindActionCreators( { selectBook: selectBook }, dispatch )
);

或者使用一些ES6速记来表示同名的对象键:

const mapDispatchToProps = dispatch => (
    bindActionCreators( { selectBook }, dispatch )
);

这个比第一个稍微短一点您不需要指向函数并分派它你把动作创造者 BindActionCreators 它能帮你完成任务。

现在,你刚派来的那个更短的:

const mapDispatchToProps = {
  selectBook,
};

即使没有 地图调度程序 :

connect( mapStateToProps, { selectBook } )( BookList )

所以, Provider 我是说, 连接 由提供 反应反应 让我们的生活更轻松。 地图状态 和 地图调度程序 是指 连接 等待名字并不重要,我们可以用任何名字,但这些都是每个人都用的事实订单很重要,如果我们想跳过 地图状态 我们必须使用 null 取而代之的是:

connect( null, mapDispatchToProps )( Component )

没有 连接 实际上我们可以用 store 它包含了什么 getState , 派遣 我是说, subscribe 有两种方式的任何组件:

不使用 反应红 并通过 商店 作为道具一直到你想使用的每个组件然后通过 this.props.store 是的。
使用 反应红 的 供应商 ,然后使用 context 组件获取 商店 .

正如您可以想象的那样,将存储区一直传递到组件是一场噩梦。

使用 商店 具有 上下文 首先需要指定 contextTypes 组成部分:

BookList.contextTypes = {
  store: React.PropTypes.object.isRequired
};

这样做之后,你可以从 this.context.store 使用 获取状态 得到州政府或 派遣 派遣你的行动创造者。

如果我们不使用 连接 :

import React, { Component } from "react";
import { selectBook } from "../actions/index";

class BookList extends Component {
  renderList() {
    return this.context.store.getState().books.map( book =>
      ( <li
        key={book.title}
        onClick={() => this.context.store.dispatch( selectBook( book ))}
      >
        {book.title}
      </li> ) );
  }

  render() {
    return (
      <ul>
        {this.renderList()}
      </ul>
    );
  }
}

BookList.contextTypes = {
  store: React.PropTypes.object.isRequired,
};

export default BookList;

这里我们使用: this.context.store.getState().books 而不是 这个。道具。书 和 this.context.store.dispatch( selectBook( book )) 而不是 this.props.selectBook( book ) . 如你所见,我们可以达到状态,并可以用这种方式派遣我们的行动创造者。但是 连接 它的灵活性,我们打开我们的国家和行动创造者在一个干净整洁的方式。