从调度程序获取未定义的结果

Question

我正在尝试使用 redux 将电影的细节获取到反应组件中但是像 undefined 一样，这是我的代码：

电影服务：

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);
    })
}

电影动作：

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
    }
}

胶片减速机：

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
    }
}

和详细信息组件

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);

我收到这个错误：

TypeError: Cannot read property 'film' of undefined

但是当我从 filmAction 记录我的数据时，我正确地得到了响应，但不是在组件中。

有人可以帮我吗？

Answer 1

看来只是个案而已

在下面找到修复方法

...
render() {
         const { film } = this.props;
         ...
    }
}
const mapStateToProps = (state) =>{
    const { film } = state.filmreducer;
    return {
        film
    };
}

从调度程序获取未定义的结果

Getting undefined result from dispatcher

parameters

dispatcher

reactjs

redux