Как сопоставить несколько состояний реквизиту с помощью Redux в React?

Question

Я новичок, чтобы реагировать, и я пытаюсь получить данные из пары действий - в одном компоненте, поэтому моя цель состоит в том, чтобы сделать это:

Предположим, у меня есть имя компонента внутриэто я хочу сделать это:

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);

Если я использую только одну карту в «подключении по умолчанию для экспорта», я не получаю ошибок -но когда я добавляю еще один объект подключения - я получаю ошибки

Так что мой вопрос - правильный ли это способ сопоставить несколько состояний реквизиту?

Answer 1

Я всегда использую "bindActionCreators", чтобы связать действия излишков.Таким образом, ваш код будет выглядеть так:

import { bindActionCreators } from 'redux';
import * as genreActionCreators from '@redux/actions/genre-actions'; // Path to the file containing the redux action fetchGenres().
import * as movieActionCreators from '@redux/actions/movie-actions'; // Path to the file containing the redux action fetchMovies().

class AllMovies extends Component {

  componentWillMount() {
    this.props.actions.genres.fetchGenres();
    this.props.actions.movies.fetchMovies();
  }

  // Rest of the component code

}

AllMovies.propTypes = {
  fetchMovies: propTypes.func.isRequired,
  fetchGenres: propTypes.func.isRequired,
  genres: propTypes.array.isRequired,
  movies: propTypes.array.isRequired
};

// Subscribing the component to redux store changes.
function mapStateToProps(state) {
  return {
    genres: state.genres,
    movies: state.movies.items,
    newMovie: state.movies.item,
    editedMovie: state.movies.item
  };
}

// Enables the component to dispatch actions
function mapDispatchToProps(dispatch) {
  return {
    actions: {
      movies: bindActionCreators(movieActionCreators, dispatch),
      genres: bindActionCreators(genreActionCreators, dispatch),
    },
  };
}

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

Надеюсь, это поможет.Ура! * * 1004

Answer 2

Я не вижу ничего плохого в вашем коде, но, возможно, вы не импортировали создателей действий, когда передавали их второму параметру connect?Это покажет что-то вроде - 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)