React Redux 无法传递功能组件的 props

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 hits.Compartmentalise 更多，希望它有所帮助。

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)