当将 Redux 状态映射到 props 到组件时，它会返回未定义

Question

我正在调用一个 API 并获取我的数据并将其成功设置为 Redux 状态，但是当我将其映射到我的组件时，它首先返回未定义然后它调用 API，但我正在使用 Redux-thunk

这是我的标题组件

export class header extends Component {
componentDidMount() {
this.props.addUpcomingMovies();
}
render() {
const Movies = this.props.popularMovies.map(movie => (
<div key={movie.id} className="header-slide-container">
<div className="header-slide">
<img
src={`https://image.tmdb.org/t/p/original${movie.poster_path}`}
alt=""
/>
{(() => {
if (!movie.title) {
return null;
}
return <Title movie={movie} />;
})()}
{(() => {
if (!movie.original_title) {
return null;
}
return <OriginalTitle movie={movie} />;
})()}
{(() => {
if (!movie.original_name) {
return null;
}
return <OriginalName movie={movie} />;
})()}
</div>
</div>
));
return (
<div className="header">
<div className="header-container">
<div className="header-slider-wrapper">
{console.log(this.props.popularMovies)}
{<Movies />}
</div>
</div>
</div>
);
}
}
const mapStateToProps = state => ({
popularMovies: state.upComingMovies.movies
});
export default connect(
mapStateToProps,
{ addUpcomingMovies }
)(header);

这是我即将推出的电影减速器

const upComingMovie = (state = [], action) => {
switch (action.type) {
case "ADD_UPCOMING_MOVIES":
console.log('reducers');
return {
...state,
movies:action.payload
}
default:
return state;
}
};
export default upComingMovie;
combining reducers 
import upComingMovie from './upcomingMovies';
import {combineReducers} from 'redux';
const allReducers = combineReducers({
upComingMovies:upComingMovie
})
export default allReducers

即将上映的电影动作

export const addUpcomingMovies = () => dispatch => {
console.log("fetching");
fetch("https://api.themoviedb.org/3/trending/all/week?api_key=25050db00f2ae7ba0e6b1631fc0d272f&language=en-US&page=1")
.then(res => res.json())
.then(movies =>
dispatch({
type: "ADD_UPCOMING_MOVIES",
payload: movies
})
);
};

这是我的商店

import { createStore, applyMiddleware,compose } from 'redux';
import thunk from 'redux-thunk';
import allReducers from './reducers';
const initialState = {};
const middleware = [thunk];
const store = createStore(allReducers,initialState,compose(applyMiddleware(...middleware), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));
export default store;

Answer 1

你的化简器不是对象，你的化简器是一个数组

const upComingMovie = (state = [], action) => {}
// ____________________________^

但是您正在使用对象

case "ADD_UPCOMING_MOVIES":
return { // <--------------- this is an object notation
...state,
movies:action.payload
}

溶液

const initialState = {
movies: []
}
const upComingMovie = (state = initialState , action) => {}

Answer 2

你的initialState是错误的，它会{movies: []}：

const initialState = { movies: []};
// ...
const upComingMovie = (state = initialState, action) => {
// ...

还要在商店中使用相同的初始状态。