React+Redux中mapStateToProps获取tvSeries为undefined问题排查

I'm currently working on a React-Redux app where I'm trying to fetch and display show data. However, I'm hitting an issue where tvSeries (and presumably other state properties) is returning undefined. It seems like the store isn't passing the reducer's data to my App component properly. Here's my code setup:

index.js #

import { getShowsHome } from './reducers/reducers';
const store = createStore(getShowsHome);
ReactDOM.render(<Provider store={store}> <App /> </Provider>, document.getElementById('root'));

App.js #

const mapStateToProps = (state) => {
  return {
    tvSeries: state.getShowsHome.tvSeries,
    isPedding: state.getShowsHome.isPedding,
    movies: state.getShowsHome.movies,
    horror: state.getShowsHome.horror,
    scifiFantasySeries: state.getShowsHome.scifiFantasySeries
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    getShows: () => dispatch(getShows())
  }
}

Reducer (reducers/reducers.js) #

const initialState = {
  isPedding: true,
  tvSeries: [],
  movies: [],
  horror: [],
  scifiFantasySeries: []
}
export const getShowsHome = (state=initialState, action={}) => {
  switch(action.type) {
    case GET_SHOWS_HOME_PEDDING:
      return Object.assign({}, state, {isPedding: true});
    case GET_SHOWS_HOME_SUCCESS:
      return Object.assign({}, state, {
        tvSeries: action.payload.popularSeries,
        movies: action.payload.popularMovies,
        horror: action.payload.horrorMovies,
        scifiFantasySeries: action.payload.scifiFantasySeries,
        isPedding: false,
      });
    case GET_SHOWS_HOME_FAILED:
      return Object.assign({}, state, {error: action.payload});
    default:
      return state;
  }
}

Root Cause #

The core issue here is how you're accessing state in mapStateToProps. When you pass getShowsHome directly to createStore as the root reducer, your store's root state is exactly the object managed by this reducer—there is no nested getShowsHome property on it.

Your current code tries to read state.getShowsHome.tvSeries, which translates to undefined.tvSeries (since that nested property doesn't exist), hence the undefined error for tvSeries.

Fixes to Apply #

1. Update mapStateToProps to access root state directly #

Modify your mapStateToProps to pull properties straight from the root state object:

const mapStateToProps = (state) => {
  return {
    tvSeries: state.tvSeries,
    isPedding: state.isPedding,
    movies: state.movies,
    horror: state.horror,
    scifiFantasySeries: state.scifiFantasySeries
  }
}

2. (Optional) Fix typos for consistency #

You have a repeated typo: isPedding should be isPending (matches standard Redux terminology). Fix this in your initial state, reducer cases, and mapStateToProps to avoid confusion down the line.

3. Ensure your action is being dispatched #

Make sure you're triggering the data fetch by calling props.getShows() in your component:

• For class components, add this to componentDidMount:

  componentDidMount() {
    this.props.getShows();
  }
  

• For functional components, use useEffect:

  useEffect(() => {
    props.getShows();
  }, [props]);
  

4. Verify action type constants are imported #

Double-check that GET_SHOWS_HOME_PEDDING, GET_SHOWS_HOME_SUCCESS, and GET_SHOWS_HOME_FAILED are properly imported into your reducer file. If these constants are undefined, the reducer will fall back to the default case and never update your state.

Additional Notes #

If you later combine multiple reducers using combineReducers, your state will become nested under each reducer's key. For example:

// index.js
import { combineReducers, createStore } from 'redux';
import { getShowsHome } from './reducers/reducers';

const rootReducer = combineReducers({
  getShowsHome: getShowsHome
});
const store = createStore(rootReducer);

In that scenario, your original mapStateToProps would work—but since you're using a single root reducer right now, no nesting is needed.

内容的提问来源于stack exchange，提问作者Alex Gioffre'