Создатель действий не определен в this.props

Question

У меня есть избыточный код, который раньше работал, но теперь выдает «this.props.watchSlidesData» - это не ошибка функции. this.props.watchSlidesData не определено в this.props.watchSlidesData () "при вызове this.props.watchSlidesData (); в ComponentWillMount ().

Я гарантировал, что все определенные переменные правильно написаны в редукторах, действиях, типах, mapToDispatchProps и mapToStateProps и правильно подключены с помощью connect. Необходимые операции импорта (например, connect и watchSlidesData) также выполняются в вызывающем компоненте (в данном случае WelcomeScreen.js). См. Фрагменты кода ниже.

Некоторые фрагменты кода:

//action (index.js)

import firebase from 'firebase';


import { 
    SLIDES_CHANGED,
} from './types';

export const watchSlidesData = () => {
  return (dispatch) => {
    firebase.database().ref("slides")
    .on("value", snapshot => 
    { 
        dispatch({ 
          type: SLIDES_CHANGED,
          payload: snapshot.val() });
    }, function(error) { console.log(error); });
  }
};

// WelcomeScreen.js snippet

import { connect } from "react-redux";
import { watchSlidesData } from '../store/actions/';

componentWillMount(){
    this.props.watchSlidesData();
}

const mapStateToProps = ({ appdata }) => {
  const {  slidesData } = appdata;
  return { 
    slidesData: slidesData,
  };
}

const mapDispatchToProps = (dispatch) => {
  return { 
    watchSlidesData: () => dispatch(watchSlidesData()),
    // actions: bindActionCreators({ watchSlidesData }, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(WelcomeScreen);

Я ожидаю, что фотографии будут извлечены из firebase и показаны в виде слайд-шоу на экране приветствия. Вызов создателя действия this.props.watchSlidesData () в ComponentWillMount () должен инициировать эту выборку посредством отправки. Но я получаю сообщение об ошибке (красный экран): this.props.watchSlidesData не является функцией, а this.props.watchSlidesData не определено

Answer 1

Вы можете сделать это:

// WelcomeScreen.js snippet

import { connect } from "react-redux";
import { watchSlidesData } from '../store/actions/';

componentWillMount(){
    this.props.watchSlidesData();
}

const mapStateToProps = ({ appdata }) => {
  const {  slidesData } = appdata;
  return { slidesData };
}


export default connect(mapStateToProps,{watchSlidesData})(WelcomeScreen);