bindActionCreators 和 mapDispatchToProps - 我需要它们吗？

Question

我正在查看一个 React-Redux 应用程序并尝试了解一切是如何工作的。

在其中一个组件中，我看到了以下代码行：

import { bindActionCreators } from "redux";

...

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ fetchPhotos }, dispatch);
}

export default connect(
  null,
  mapDispatchToProps
)(SearchBar);

如果我将上面的代码更改为以下代码，一切仍然正常，没有任何错误：

function mapStateToProps(photos) {
  return { photos };
}

export default connect(
  mapStateToProps,
  { fetchPhotos }
)(SearchBar);

对我来说，似乎我使用 connect 的方式更容易理解，也不需要导入额外的库。

有什么理由要导入 bindActionCreators 并使用 ma​​pDispatchToProps？

Answer 1

我是 Redux 维护者。

是的，您展示的第二个示例使用了the "object shorthand" form of mapDispatch。

我们建议始终使用 mapDispatch 的“对象速记”形式，除非您有特定的理由来自定义调度行为。

Answer 2

我个人避免明确使用 bindActionCreators。我更喜欢使用内部使用 bindActionCreators 的 mapDispatchToProps 直接调度函数。

const mapStateToProps = state => ({
 photos: state.photos.photos
});

const mapDispatchToProps = dispatch => ({
  fetchPhotos: () => dispatch(fetchPhotos())
  // ...Other actions from other files
});

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

在两种情况下，您将明确使用 bindActionCreators，这两种情况都不是最佳实践：

1. 如果 SearchBar 的子组件没有连接到 redux，但您想将 action dispatch 作为 props 传递给它，则可以使用 bindActionCreators。 最佳实践与示例 I 相同。您可以直接将 this.props.fetchPhotos 传递给子组件，而无需使用 bindActionCreators。

class SearchBar extends React.Component {
  render() {
    return (
      <React.Fragment>
         <ChildComponentOfSearchBar fetchPhotos={this.props.fetchPhotos} />
      </React.Fragment>
    )
  }
}

const mapStateToProps = state => ({
 photos: state.photos.photos
});

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

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

1. 还有另一种不太可能的情况，您可以使用 bindActionCreators，在组件内定义 actionCreator。这是不可维护的，也不是一个好的解决方案，因为操作类型是硬编码的并且不可重用。

class SearchBar extends React.Component {
  constructor(props) {
   super(props);
   this.fetchPhotosAction = bindActionCreators({ fetchPhotos: this.searchFunction }, dispatch);
  }

  searchFunction = (text) => {
   return {
     type: ‘SEARCH_ACTION’,
     text
   }
  }

  render() {
    return (
      <React.Fragment>
        // Importing selectively
        <ChildComponentOfSearchBar fetchPhotos={this.fetchPhotosAction} />
      </React.Fragment>
    )
  }
}

const mapStateToProps = state => ({
 photos: state.photos.photos
});

export default connect(mapStateToProps, null)(SearchBar)