React Redux, значение из reducer показывает undefined в console.log

Question

Это мой файл shideshow.jsx, я пытаюсь получить доступ к значению this.props.currentSlideIndex внутри componentDidMount (), и он возвращает null. Кстати, currentSlideIndex возвращается из mapStateToProps ниже. В приведенном ниже случае я могу получить доступ к picStatus из mapStateToProps, но не из slideIndex, хотя оба редуктора, похоже, реализованы точно так же.

import React, { Component } from 'react';
import styles from '../stylesheets/style.module.css';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { CSSTransitionGroup } from 'react-css-transition';
import { connect } from 'react-redux';
import { changePic, slideIndex, startSlides } from '../actionFire';
import slidePic1 from '../images/slidepic1.webp';
import slidePic2 from '../images/slidepic2.webp';
import slidePic3 from '../images/slidepic3.webp';
import slidePic4 from '../images/slidepic4.webp';
import slidePic5 from '../images/slidepic5.webp';

class SlideShow extends Component {
  state = {
    backgroundColor: 'white',
    // slideIndex: 1,
  };

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log(' slide index is ' + this.props.picStatus);
    if (!this.props.slideStatus) {
      setInterval(() => {
        //this.setState({ pic: !this.state.changePic });
        this.props.changePic();
        // console.log(this.state.changePic);
        if (this.props.picStatus != true) {
          if (this.props.currentSlideIndex == 5) this.props.slideIndex();
          else this.props.slideIndex();
        }
      }, 4000);
      //this.setState({ startSlides: true });
      this.props.startSlides();
    }
  }

  render() {
    function GetFirstImage() {
      return <img src={slidePic1} width="100%" height="300px"></img>;
    }
    function GetSecondImage() {
      return <img src={slidePic2} width="100%" height="300px"></img>;
    }
    function GetThirdImage() {
      return <img src={slidePic3} width="100%" height="300px"></img>;
    }
    function GetFourthImage() {
      return <img src={slidePic4} width="100%" height="300px"></img>;
    }
    function GetFifthImage() {
      return <img src={slidePic5} width="100%" height="300px"></img>;
    }
    function GetImage(slideNum) {
      switch (slideNum) {
        case 1:
          return <GetFirstImage></GetFirstImage>;
          break;
        case 2:
          return <GetSecondImage></GetSecondImage>;
          break;
        case 3:
          return <GetThirdImage></GetThirdImage>;
          break;
        case 4:
          return <GetFourthImage></GetFourthImage>;
          break;
        case 5:
          return <GetFifthImage></GetFifthImage>;
          break;
      }
      return <GetFifthImage></GetFifthImage>;
    }
    return (
      <div className={styles.slideshowContainer}>
        <CSSTransition
          in={this.props.picStatus}
          timeout={4000}
          classNames={{
            enter: styles['slidePics-enter'],
            enterActive: styles['slidePics-enter-active'],
            exit: styles['slidePics-exit'],
            exitActive: styles['slidePics-exit-active'],
          }}
          unmountOnExit={true}
          mountOnEnter={true}
        >
          <GetImage slideNum={this.props.currentSlideIndex}></GetImage>
        </CSSTransition>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    picStatus: state.changePic,
    slideStatus: state.startSlides,
    currentSlideIndex: state.slideIndex,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    changePic: () => dispatch(changePic()),
    startSlides: () => dispatch(startSlides()),
    slideIndex: () => dispatch(slideIndex()),
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(SlideShow);

Ниже приведен файл, из которого сработало мое действие, т.е. js: -

export { changePic } from './actions/changePicAction';
export { startSlides } from './actions/startSlidesAction';
export { slideIndex } from './actions/slideIndexAction';

Ниже показано slideIndexAction. js файл:

import { SLIDE_INDEX } from './actionConstants';

export const slideIndex = () => {
  return {
    type: SLIDE_INDEX,
  };
};

Ниже actionConstants. js

export const CHANGE_PIC = 'CHANGE_PIC';
export const START_SLIDES = 'START_SLIDES';
export const SLIDE_INDEX = 'SLIDE_INDEX';

И самое главное slideIndexReducer. js файл

import { SLIDE_INDEX } from '../actions/actionConstants';
const initialState = { slideIndex: 1 };

const slideIndexReducer = (state = initialState, action) => {
  switch (action.type) {
    case SLIDE_INDEX:
      return { ...state, slideIndex: state.slideIndex + 1 };
    default:
      return state;
  }
};

export default slideIndexReducer;

Вот мой магазин. js: -

import { createStore } from 'redux';
import changePicReducer from './reducers/changePicReducer';
import slideIndexReducer from './reducers/slideIndexReducer';
import startSlidesReducer from './reducers/startSlidesReducer';

const redux = require('redux');
const combineReducers = redux.combineReducers;

const rootReducer = combineReducers({
  startSlidesReducer: startSlidesReducer,
  changePicReducer: changePicReducer,
  slideIndexReducer: slideIndexReducer,
});
const store = createStore(rootReducer);

export default store;

Answer 1

Проверьте, как вы создаете свое хранилище redux (createStore). В общем, mapStateToProps выглядит примерно так, если вы объединяетеReducers.

const mapStateToProps = ({ startSlidesReducer, changePicReducer, slideIndexReducer }) => {
  return {
    picStatus: changePicReducer.changePic,
    slideStatus: startSlidesReducer.startSlides,
    currentSlideIndex: slideIndexReducer.slideIndex,
  };
};