我创建了组件Dashboard.js,从中调用动作movievalues,该组件将在movieprofiles数组中返回5个电影的数组。但是,当我在Dashboard组件中调用action和movieProfiles时,它返回未定义。我期望返回具有五个电影数据的数组。
错误图片
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);