的解决方案

Question

我正在尝试在React-Redux环境中使用Axios发出API请求。在控制台上一切似乎都很好，但是如果我尝试访问任何数据，我会得到未定义或空数组。

这是我的组成部分：

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我注意到状态不包含任何数据值。

我在互联网上阅读此门户网站的类似问题，但无法找到解决我问题的方法。

的解决方案

来自官方docs：

您可以在操作中使用专用状态字段

基本上，您需要为每个州分派操作，以使异步操作正常工作。

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设置非常简单。您只需对商店进行一些更改即可。在框中，我非常确定redux不是最友好的异步，这就是为什么thunk在那里。

public class CardViewModel
{
    public int CardID { get; set; }
    public string SSN { get; set; }
    public int PortID { get; set; }
    public Nullable<int> TransactionID { get; set; }
    public int AddedUserID { get; set; }
    public System.DateTime Created { get; set; }
    public Nullable<int> BatchID { get; set; }

    public virtual Card Cards1 { get; set; }
    public virtual Card Card1 { get; set; }
    public virtual Batch Batch { get; set; }
    public virtual Port Port { get; set; }
    public virtual Transaction Transaction { get; set; }
    public virtual User User { get; set; }

}

然后在您的行动中，您需要返回调度，该调度将处理您的axios调用的逻辑。

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

你的减速机看起来很好，但是按照我的代码输入方式，你将分别拥有状态。如果需要状态和结果，可以在discoverMovie中返回之前将它们组合到自己的对象中。

这是我在堆栈上的第一个答案，所以让我知道我是否可以更好地澄清一切！

无法访问数据请求Axios，React-Redux

的解决方案

1 个答案: