Getting undefined result from dispatcher - reactjs

Question

I am trying to get the details of film using redux into the react component
but getting it like undefined , here is my code :
Film Service :
import axios from 'axios';
import config from '../config/config';
export const FilmServices = {
getAllFilms,
searchFilm,
getFilmByID
};
function getFilmByID(apiEndpoint){
return axios.get(config.detailsUrl+apiEndpoint).then((response)=>{
return response;
}).catch((err)=>{
console.log(err);
})
}
Film Action :
import {FilmServices} from '../../services/FilmServices'
export function getFilmByID(idFilm) {
return dispatch => {
FilmServices.getFilmByID(idFilm)
.then((response) => {
if (response) {
dispatch(GET_FILMS_BY_ID(response));
}
})
}
}
function GET_FILMS_BY_ID(response){
return{
type: "GET_FILMS_BY_ID",
payload: response
}
}
Film Reducer :
const initialState = { film: {}}
export function filmreducer(state = initialState, action) {
case 'GET_FILMS_BY_ID':
console.log(action.payload.data)
return{
...state,
film : action.payload.data
};
default:
return state
}
}
And Details Component
import React, {Component} from 'react';
import connect from "react-redux/es/connect/connect";
import {getFilmByID} from "../store/actions/FilmActions";
class Details extends Component {
componentDidMount() {
const {idFilm} = this.props.match.params
const {dispatch } = this.props;
dispatch(getFilmByID(idFilm));
}
constructor(props) {
super(props);
}
render() {
const {film} = this.props.Film;
return (
<React.Fragment>
{/*<h1>{this.idFilm}</h1>*/}
<h1>{film.name}</h1>
</React.Fragment>
);
}
}
const mapStateToProps = (state) =>{
const { Film } = state.filmreducer;
return {
Film
};
}
export default connect(
mapStateToProps
)(Details);
I am getting this error :
TypeError: Cannot read property 'film' of undefined
But when i log my data from filmAction i'm correctly getting the response but not in the component .
Can any one help me please ?

Answer 1

Looks like it's just a situation of cases.
find fixes below
...
render() {
const { film } = this.props;
...
}
}
const mapStateToProps = (state) =>{
const { film } = state.filmreducer;
return {
film
};
}