javascript - 当将 redux 状态映射到 props 到组件中时，它返回未定义

Question

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

这是我的 header 组件

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

这是我即将推出的电影 reducer

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

即将上映的电影 Action

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

你的reducer不是对象，你的reducer是一个数组

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) => {}