Redux mapStateToProps состояние в компонентах

Question

Мне называют свое действие в Redux Dev Tools и даже новое состояние, но в фактических свойствах Компонента не определено.

Компонент:

import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { getPromos } from '../../actions/promo';
import PropTypes from 'prop-types';

const Landing = ({ getPromos, data }) => {
  useEffect(() => {
    getPromos();
    console.log(data) // ==>> "UNDEFINED"
  }, []);

  return (
    <div>
      <section className='landing'>
        <div className='dark-overlay'>
          <div className='landing-inner'>
            <h1 className='x-large'> Developer Connector </h1>
            <p className='lead'>
              Create a developer profile/portfolio, share posts and get help
              from other developers
            </p>
            <div className='buttons'>
              <Link to='/register' className='btn btn-primary'>
                Sign Up
              </Link>
              <Link to='/login' className='btn btn-light'>
                Login
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

Landing.propTypes = {
  getPromos: PropTypes.func.isRequired
};

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

export default connect(
  mapStateToProps,
  { getPromos }
)(Landing);

Действия:

import axios from 'axios';
import { setAlert } from './alert';
import { GET_PROMOS, REGISTER_FAIL } from './types';

export const getPromos = () => async dispatch => {
  try {
    const res = await axios.get('/api/promo');
    dispatch({
      type: GET_PROMOS,
      payload: res.data
    });
  } catch (err) {
    const errors = err.response.data.errors;
    if (errors) {
      errors.forEach(error => dispatch(setAlert(error.msg, 'danger')));
    }

    dispatch({ type: REGISTER_FAIL });
  }
};

И редуктор:

import { GET_PROMOS } from '../actions/types';

const initialState = {
  data: null,
  title: ''
};

export default function(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case GET_PROMOS:
      return { ...state, data: payload };
    default:
      return state;
  }
}

Как я уже говорил, в Redux Dev Tools я получаю желаемый результат.Но по какой-то причине я не могу отобразить это состояние в компоненте.Что я ошибаюсь?Это может быть что-то про крючки?

Спасибо!

Answer 1

введите описание изображения здесь

Вот скриншот инструментов dev-редукса

Answer 2

Первое, что бросается в глаза, это то, что у вас конфликт имен с getPromos в вашем компоненте, он определен в импорте как getPromos, затем он также деструктурирован в компоненте как { getPromos }. Я удивлен, что вы не получили ошибку там из-за конфликтов имен. Вы захотите НЕ деструктурировать getPromos в компоненте и вместо этого назвать его как (props) => { props.getPromos }, чтобы фактически вызвать подключенного создателя действия вместо неподключенного.

Во-вторых, это редуктор основной корневой редуктор? или он вложен в корневой редуктор? если последнее верно, то в вашем mapStateToProps data prop должен быть на один уровень глубже, как в state: state.rootLevelState.data (извините, не могу задавать вопросы в комментариях из-за репутации <50) </p>