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)