Как прокинуть в пропсы компонента данные из store?

Question

[lexstile]

Получается такая ситуация, что в store данные подгружаются после того, как мы прокидываем в mapStateToProps, как сделать, чтобы в пропсах оказались такие же данные, что и в store?

// здесь сейчас приходит промис
const mapStateToProps = state => ({
  movies: get(state[APP_STORE_KEY], MOVIES_STORE_KEY),
  recommendations: get(state[APP_STORE_KEY], MOVIES_REC_STORE_KEY),
});

const mapDispatchToProps = dispatch => ({
  movies: dispatch(getMoviesAction()),
  recommendations: dispatch(getRecommendationsAction()),
});

// actions
export const getMoviesAction = () => dispatch => axios.get(`${API_BASE_URL}/api/movies`)
  .then(response => dispatch(getMovies(response.data)))
  .catch(error => error);

export const getRecommendationsAction = () => dispatch => axios.get(`${API_BASE_URL}/api/recommendations`)
  .then(response => dispatch(getRecommendations(response.data)))
  .catch(error => error);

// actionCreators
export const getMovies = movies => ({
  type: 'GET_MOVIES',
  payload: movies,
});

export const getRecommendations = recommendations => ({
  type: 'GET_RECOMMENDATIONS',
  payload: recommendations,
});

Comments

[Петр Мухуров]

export default connect(({ ...props }) => ({ ...props }), null)(YourComponent)

Answer 1

[Филипп Гапоненко]

У вас в mapStateToProps и в mapDispatchToProps одинаковые поля, в пропсах компонента одно из этих полей перезатрет другое.

Comments

[lexstile]

Вот что значит работать 20 часов в сутки.
Спасибо!

Answer 2

[Антон Спирин]

1. mapStateToProps метод для маппинга данных store в свойства компонента. Никаких Promise там быть не должно.
Насколько я понял их там и нет, это неправильный mapDispatchToProps переопределяет значения, так как возвращает одноименные свойства.

2. Вызов mapDispatchToProps у вас написан неправильно. Вы просто вызываете actions и возвращаете promise. Еще он переопределяет свойства из mapStateToProps.
Правильно так:

const mapDispatchToProps = dispatch => ({
  getMovies: () => dispatch(getMoviesAction()),
  getRecommendations: () => dispatch(getRecommendationsAction()),
});

или:

const mapDispatchToProps = {
  getMovies: getMoviesAction,
  getRecommendations: getRecommendationsAction,
};

3. Названия действий лучше изменить:

getMoviesAction ==> getMovies
getMovies ==> getMoviesSucceeded

После переименования actions, mapDispatchToProps сокращается до:

const mapDispatchToProps = {
  getMovies,
  getRecommendations,
};

Comments

[lexstile]

Благодарю! Я просто поплыл.