reactjs - 如何在 React 中使用 Redux 将多个状态映射到 props？

Question

我是一个 react 新手，我正在尝试从一个组件中的几个操作中获取数据，所以我的目标是这样做:

假设我有一个组件名称在里面我想这样做:

componentWillMount() {
    this.props.fetchGenres();
    this.props.fetchMovies();
}

在导出区域:

AllMovies.propTypes = {
  fetchMovies: propTypes.func.isRequired,
  fetchGenres: propTypes.func.isRequired,
  genres: propTypes.array.isRequired,
  movies: propTypes.array.isRequired
};
const mapStateToProps = state => ({
  genres: state.genres,
  movies: state.movies.items,
  newMovie: state.movies.item,
  editedMovie: state.movies.item
});

export default connect(
  mapStateToProps,
  { fetchMovies, fetchGenres }
)(AllMovies);

如果我在“导出默认连接”中仅使用一个映射，我不会收到任何错误 - 但是当我将另一个映射添加到连接对象时 - 我会收到错误

所以我的问题是 - 这是将多个状态映射到 props 的正确方法吗？

Answer 1

我发现您的代码没有任何问题，但也许您在将操作创建者传递给连接的第二个参数时没有导入它们？它会显示类似 - ReferenceError: fetchMovies is not defined 。如果是这样，您尝试通过 {fetchMovies, fetchGenres} 就会抛出此错误到connect函数不是 componentWillMount() 中的代码.

// Import statements
import { fetchMovies, fetchGenres } from '/path/to/actionCreators';


// Your react component somewhere here.


const mapStateToProps = state => {
    // This is the longhand of what you did
    return {
        genres: state.genres,
        movies: state.movies.items,
        newMovie: state.movies.item,
        editedMovie: state.movies.item
    };
};

/**
 * It's generally more clear to have mapDispatchToProps 
 * as a variable instead of passing the object directly 
 * to the connect. It's not wrong though. Make sure these
 * are imported.
 */

const mapDispatchToProps = {
    fetchMovies
    fetchGenres
};

export default connect(mapStateToProps, mapDispatchToProps)