Состояние Redux возвращает неопределенное - PullRequest
Новая
       10

Состояние Redux возвращает неопределенное

0 голосов
/ 24 июня 2018

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

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

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.log(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 Noob. 

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" возвращает неопределенное.И попытка использовать this.props.data или this.props.data.utopianCash в компоненте Utopian также возвращает неопределенное значение.

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

...