从组件调用操作时,未定义错误movieValues和movieProfile

时间:2020-04-28 14:28:39

标签: reactjs react-redux

我创建了组件Dashboard.js,从中调用动作movievalues,该组件将在movieprofiles数组中返回5个电影的数组。但是,当我在Dashboard组件中调用action和movieProfiles时,它返回未定义。我期望返回具有五个电影数据的数组。

错误图片

enter image description here

Combine Reducer file index.js

import{ combineReducers} from 'redux';
 import moviedata from './moviedata';
 import expenses from './moviedata';


export default  combineReducers({
 moviedata,
 expenses
}); 

Reducer movidata

 import {MOVIEDATA,MOVIEDATA_ERROR, ACTIONTEST} from '../action/type';
    const initialState={
        movieProfiles:[],
        error:{},
        testvalue:null,
        loading:true

    }
    export default function (state= initialState,action){
    const {type,payload}=action;
    switch(type){
     case MOVIEDATA:   
        console.log('working');
        return{
           ...state,
           movieProfiles:payload,
           loading:false
        }
        case MOVIEDATA_ERROR:
            return {
                ...state,
                error:payload,
                loading:false

            };

        default:
            return state;

    }
    }

Action Moviedata.js

import {MOVIEDATA,MOVIEDATA_ERROR,ACTIONTEST} from './type';
import axios from 'axios';
//Load User

export const movieValues =() => async dispatch =>{
    console.log("action");
    const value={
        id:1,
        count:5
    }
    const config={
    headers:{
        'Content-Type':'application/json'
    }
}
    try{

        const res=await axios.get('https://movieapi-info.herokuapp.com/',value,config);
        console.log(res.data.data);

        dispatch({
            type: MOVIEDATA,
            payload:res.data.data
        });

    }
    catch(err)
    {
         dispatch({
             type:MOVIEDATA_ERROR
         })
    }
} 

Component dashboard.js where i am calling action movieValues

import React,{Fragment} from 'react';
import PropTypes from 'prop-types';
import {movieValues} from '../../action/moviedata'
import {connect} from 'react-redux';

export const Dashboard=({movieValues,movieProfiles})=>{

console.log(movieProfiles);
const getData = e =>{
  e.preventDefault();
  const val= movieValues();
  console.log(val);
}

return(
    <div>
    <button onClick={getData}>Get Data</button>
    </div>
)

}
Dashboard.propTypes = {
    movieValues: PropTypes.func.isRequired,
    movieProfiles:PropTypes.object.isRequired
  };

  const mapStateToProps =state=>({
    movieProfiles:state.moviedata.movieProfiles

})


  export default connect(
    mapStateToProps,
    {movieValues}
  )(Dashboard);  

0 个答案:

没有答案