React Redux，reducer 的值在 console.log 上显示未定义

Question

这是我的 shideshow.jsx 文件，我正在尝试访问 componentDidMount() 中 this.props.currentSlideIndex 的值，它返回 null。顺便说一下，currentSlideIndex 是从下面的 mapStateToProps 返回的。在下面的例子中，我能够从 mapStateToProps 访问 picStatus 而不是 slideIndex，尽管这两个 reducer 似乎是以完全相同的方式实现的。

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

下面是触发我的操作的文件，即 actionFire.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;

这是我的 store.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)。一般来说，如果你结合 Reducers，mapStateToProps 看起来更像这样。

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

React Redux，reducer 的值在 console.log 上显示未定义

React Redux , value from reducer showing undefined on console.log

reducers

reactjs

redux

react-redux