Не удается получить доступ к данным запроса Axios, React-Redux

Question

Я пытаюсь сделать запрос API, используя Axios в среде React-Redux. На консоли все вроде бы нормально, но если я пытаюсь получить доступ к каким-либо данным, я получаю неопределенный или пустой массив.

Это мой компонент:

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

//Home component 
class Home extends Component {

  //make request before the render method is invoked
  componentWillMount(){
    this.props.discoverMovie();
  }

  //render
  render() {
    console.log('movie res ',this.props.movies.movies.res);
    console.log('movie ',this.props.movies);
    return (
      <div>
        Home
        movie
      </div>
    )
  }
};

const mapStateToProps = (state) => {
  return{
    movies : state.movies
  }
}

export default connect(mapStateToProps, { discoverMovie })(Home);

Это моё действие

import { DISCOVER_MOVIE } from '../constants';
import axios from 'axios';


//fetch movie
const fetchMovie = () => {
  const url = 'https://api.themoviedb.org/3/discover/movie?year=2018&primary_release_year=2018&page=1&include_video=false&include_adult=false&sort_by=vote_average.desc&language=en-US&api_key=72049b7019c79f226fad8eec6e1ee889';
  let result = {
    res : [],
    status : ''
  };

  //make a get request to get the movies 
  axios.get(url).
    then((res) => {
      result.res = res.data.results;
      result.status = res.status;
      return result;
    });

  //return the result after the request
  return result;
}

//main action
const discoverMovie = () =>{
  const result = fetchMovie();
  //return the action
  return {
    type : DISCOVER_MOVIE,
    payload : result 
  }
}

export default discoverMovie;   

Это редуктор

    import { DISCOVER_MOVIE } from '../constants';

//initial state

    const initialState = {
      movies : {},
      query : '',
    };

    //export module
    export default (state = initialState, actions) =>{
      switch(actions.type){
        case DISCOVER_MOVIE : 
          return {
            ...state,
            movies : actions.payload
          };
        default : 
          return state;
      }
    }

это журнал, который я получаю с консоли как вы можете видеть, если я регистрирую весь объект, я вижу все данные, однако, если углубиться и попытаться получить доступ к результату, я получу неопределенный или пустой массив и, используя redux-dev-tools, я заметил, что состояние не содержит каких-либо значение.

Я прочитал в Интернете, включая этот портал, аналогичную проблему, но не смог найти решения для моей проблемы.

Решение

Из официальных документов :

Вы можете использовать выделенное поле статуса в своих действиях

Как правило, вам нужно отправить действие для каждого состояния, чтобы асинхронное действие работало правильно.

const searchQuery = () => {
  return dispatch => {

    dispatch({
      type : 'START',
    })

    //make a get request to get the movies 
    axios.get(url)
      .then((res) => {
        dispatch({type : 'PASS', payload : res.data});
      })
      .catch((err) => {
        dispatch({type : 'FAILED', payload : res.error});
    });
  }

Answer 1

С помощью redux-thunk его довольно просто настроить. Вам просто нужно внести некоторые изменения в ваш магазин. Из коробки я почти уверен, что приёмник не самый дружелюбный в асинхронном режиме, и именно поэтому есть толк.

import { ..., applyMiddleware } from "redux";
import thunk from "redux-thunk";
...
const store = createStore(reducer, applyMiddleware(thunk));
...

Тогда в вашем действии вам нужно будет возвращать диспетчеризацию, которая будет обрабатывать вашу логику для вашего вызова axios.

const fetchMovie = () => {
  return dispatch => {
    const url = //Your url string here;
    axios.get(url).then(res => {
      dispatch(discoverMovie(res.data.results, res.status);
    }).catch(err => {
       //handle error if you want
    });
  };
};

export const discoverMovie = (results, status) => {
  return {
    type: DISCOVER_MOVIE,
    payload: results,
    status: status
  };
};

Ваш редуктор выглядит нормально, хотя при наборе моего кода у вас будет статус отдельно. Вы можете объединить их в свой собственный объект перед возвратом в DiscoverMovie, если вам нужен статус с результатами.

Это мой первый ответ в стеке, поэтому дайте мне знать, если я смогу объяснить что-нибудь лучше!