Состояние Redux возвращает undefined

Я новичок, когда дело доходит до использования Redux, и у меня возникают проблемы с получением данных из API и доступом к ним через реквизиты Redux. Когда я пытаюсь получить доступ к данным, полученным моим действием, он возвращает значение undefined.

Вот компонент, в котором я пытаюсь использовать данные:

import React, { Component } from 'react';
import dsteem from 'dsteem';
import { Client } from 'dsteem';
import jsonQuery from 'json-query';
import { connect } from 'react-redux';
import { fetchUtopian } from '../actions/Utopian-action';


class Utopian extends Component {
    componentDidMount() {
      this.props.fetchUtopian();
    }


  render() {

   console.info(this.props.data);


    return (
      <div className = "utopian-container">

      </div>
    );
  }
}


const mapDispatchToProps = dispatch => ({
  fetchUtopian: () => dispatch(fetchUtopian())
})

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

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

Вот действие, которое извлекает данные. Я делаю вызов API внутри действия и думаю, что, возможно, он неправильно отформатирован. Опять же, я новичок Redux.

import dsteem from 'dsteem';
import { Client } from 'dsteem';

export function fetchUtopian() {
  return function (dispatch) {
    dispatch({ type: "FETCH_UTOPIAN" });


    const client = new Client('https://api.steemit.com')

    var utopianHot = {
      tag: 'utopian-io',
      limit: 20
    }

     client.database
       .getDiscussions('hot', utopianHot)
       .then((response) => {
         dispatch({ type: "FETCH_UTOPIAN_FULFILLED", payload: response.data })
       })
      .catch((err) => {
        dispatch({ type: "FETCH_UTOPIAN_REJECTED", payload: err })
      })
  }
}

Вот редуктор:

export default function reducer (state = {
  utopianCash: [],
  fetching: false,
  fetched: false,
  error: null,
}, action) {

  switch (action.type) {
    case "FETCH_UTOPIAN": {
      return {...state, fetching: true}
    }
    case "FETCH_UTOPIAN_REJECTED": {
      return {...state, fetching: false, error: action.payload}
    }
    case "FETCH_UTOPIAN_FULFILLED": {
      return {
        ...state,
        fetching: false,
        fetched: true,
        utopianCash: action.payload
      }
    }
  }
  return state;
}

Комбинированные редукторы

// Combine Reducers in this file and export them
import { combineReducers } from 'redux'
import utopianReducer from './Utopian-reducer';

export default combineReducers({
  utopianReducer
})

response.data в "FETCH_UTOPIAN_FULFILLED" возвращает значение undefined. И попытка использовать this.props.data или this.props.data.utopianCash в утопическом компоненте также возвращает undefined.

Как мне успешно получить данные из API в действии, а затем использовать их в компоненте?