mapStateToProps () в Connect () должен возвращать простой объект. Вместо этого получил неопределенный

Question

У меня проблема с отображением данных.

В моем приложении я использую реаги и редукс.

В консоли я получу ошибку mapStateToProps() in Connect(ListPets) must return a plain object. Instead received undefined.

Это мой главный компонент

import React, { Component } from 'react';
import { connect } from 'react-redux';
import loadData from '../actions/actions';

class ListPets extends Component {

  componentDidMount() {
    const { loadData } = this.props;
    loadData();
    console.log(loadData );
  }

  render() {
    const { dataPet } = this.props;
    return (
      <div>


      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return state;
};

const mapDispatchToProps = (dispatch) => {
  return {
    loadData: () => dispatch(loadData())
  }
};

Этот фрагмент console.log(loadData ); дисплей

ƒ loadData() {
      return dispatch(Object(_actions_actions__WEBPACK_IMPORTED_MODULE_7__["default"])());
    }

Когда я добавляю код {dataPet.data} в div. Я получаю ошибку. Как будто этих данных не было в магазине, я не знаю ...

это моя редукторная функция

const initialState = {
  isFetching: false,
  dataPet: [],
};

const fetchDataReducer = (state=initialState, action) => {
  switch(action.types) {
    case actionTypes.FETCH_DATA_START:
      return {
        ...state,
        isFetching: true,
      }
    case actionTypes.FETCH_DATA_SUCCESS:
      return {
        ...state,
        isFetching: false,
        dataPet: action.dataPet,
      }
    case actionTypes.FETCH_DATA_FAIL:
      return {
        ...state,
        isFetching: false,
      }
  };
}

Данные хорошо загружены, потому что консоль получает действие FETCH_DATA_SUCCESS.

Понятия не имею, как решить эту проблему

Answer 1

Я сделал некоторые изменения в вашем коде, попробуйте это сейчас ... должно работать https://codesandbox.io/s/z2volo1n6m

Answer 2

В вашем редукторе есть опечатка:

const fetchDataReducer = (state=initialState, action) => {
  switch(action.types) { // here

Это должно быть action.type, а не action.types.

Answer 3

Если thing - объект в состоянии:

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

Тогда используйте как:

this.props.thing в вашем компоненте