React Redux无法通过功能组件的道具

Question

我想在这里实现的目标是能够点击图片并呈现所点击的电影的信息。问题是我找不到匹配点击的电影和详细电影的ID的方法。结果，singleMovierequest具有未定义的ID，这会导致404错误。这是codesandbox链接：https://codesandbox.io/s/modern-http-coy0w（Api键有意键入为“ ???”）。这是电影和应用程序组件。

const Movie = (props) => {

const movie = props.singleMovie
const fetchMovie = props.initializeSingleMovie
useEffect(() => { fetchMovie(props.id) }, [props.id]) 

return (
    <div>
        <h2>{movie.title}</h2>
        <p>{movie.overview}</p>
    </div>
)

}应用程序组件的渲染部分：

<Container>
        <h2>Movieapp</h2>
        <Router>
            <Menu />
            <Route exact path="/popular" render={() =>
                <PopularMovies />
            } />
            <Route exact path="/search" render={() =>
                <Movies />
            } />
            <Route exact path="/search/:id" render={(props) => <Movie key={props.match.params.id} />} />
            } />
            <Route exact path="/popular/:id" render={(props) => <Movie key={props.match.params.id} />} />
        </Router>

    </Container>

Answer 1

“ initializeSingleMovie”是一个动作，您将其命名为reducer但它是一个动作，为了解决此问题，您必须使用mapDisptachToProps和dispatch（它将访问存储方法），下面是经过修改的Movie.js文件。将来会为api命中提供一个单独的动作文件夹。更多信息，希望对您有所帮助。

import React from 'react'
import { connect } from 'react-redux'
import { useEffect } from 'react'
import { initializeSingleMovie } from '../reducers/singleMovieReducer'


const Movie = (props) => {

    console.log(props,"");


    const movie = props.singleMovie
    props.initializeSingleMovie(props.id)


    return (
        <div>
            <h2>{movie.title}</h2>
            <p>{movie.overview}</p>
        </div>
    )
}

const mapStateToProps = (state) => {
    return {
        singleMovie: state.singleMovie
    }
}
const mapDispatchToProps = dispatch => {
   return {
   initializeSingleMovie: (id) => dispatch(initializeSingleMovie(id)),

   };
}; 

export default connect(
    mapStateToProps,
    mapDisptachToProps
)(Movie)