【问题标题】：Understanding ReduxForm connect function syntax [duplicate]了解 ReduxForm 连接函数语法 [重复]
【发布时间】：2018-03-30 09:38:36
【问题描述】：

我的习惯：

我已经习惯了看到这样的东西：

export default connect(mapStateToProps, mapDispatchToProps)(BookList);

mapDispatchToProps 看起来像这样：

function mapDispatchToProps(dispatch) {
  return bindActionCreators({selectBook: selectBook}, dispatch);
}

我遇到的（在 ReduxForm 中）：

export default reduxForm({ 
  validate,
  form: 'PostsNewForm'
})(
  connect(null, {createPost})(PostsNew)
);

我觉得这部分特别令人费解：connect(null, {createPost})(PostsNew)。

这行代码与上面的代码有何不同？为什么我们不需要 mapDispatchToProps？

【问题讨论】：

重复的问题可能与您的问题不同，但它的答案解释了这两件事

标签： javascript reactjs redux react-redux redux-form

【解决方案1】：

如果需要，您可以使用mapStateToProps。 react-redux 不需要它。

示例取自DOCS：

import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import { connect } from 'react-redux';

class Example extends Component {
    // ...
};

const mapStateToProps = (state) => ({
    // ...
});

const mapDispatchToProps = (dispatch)  => ({
    // ...
});

Example = connect(
    mapStateToProps,
    mapDispatchToProps
)(Example);

export default reduxForm({
    form: 'example' // a unique name for this form
})(Example);

【讨论】：

【解决方案2】：

connect 的mapDispatchToProps 允许对象字面量的简写形式，也就是说，如果您要映射到的函数（传递给您的组件的最终结果）与将被分派的动作创建者具有相同的签名，那么它很友好吵吵闹闹必须做所有bindActionCreator 的东西。传递一个对象字面量作为 mapDispatchToProps 参数告诉 react-redux 为你做这件事。

所以，你的第一个例子可以重写为

connect(mapStateToProps, { selectBook })(BookList)

如果您不确定为什么 { selectBook } 和 { selectBook: selectBook } 是等价的，您可能还想查看下面的 mdn 链接。

参考： https://github.com/reactjs/react-redux/blob/master/docs/api.md#inject-todos-and-specific-action-creators-addtodo-and-deletetodo-with-shorthand-syntax

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015

【讨论】：