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 并使用 mapDispatchToProps ？

Answer 1

我个人避免明确使用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，但这两种方法都不是最佳实践：

如果SearchBar的子组件未连接到Redux，但您希望将动作分派作为道具传递给它，则可以使用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);

还有另一种不太可能出现的情况，您可以使用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)

Answer 2

我是Redux的维护者。

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

我们建议始终使用mapDispatch的“对象简写”形式，除非您出于特殊原因需要自定义调度行为。

bindActionCreators和mapDispatchToProps-我需要它们吗？

2 个答案: