Uncaught TypeError: this.props.fetchResults не является функцией

Question

Здравствуйте, я начинаю в реагировать на редукцию. Я пытаюсь играть с API. Моя проблема заключается в том, чтобы начать с моей идеи. Я надеюсь сделать выбор и выбрать все результаты за день:

Мой компонент ResultListItems:

import { connect } from 'react-redux';
import { fetchResults } from "../actions/index";



class ResultListItems extends Component {
  componentWillMount(){
      this.props.fetchResults();
  }

  render() {
    return (
      <div>
        <h2>Coucou la liste resultats</h2>
        <select></select>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    results: state.resultsReducer.results
  };
};


export default connect(mapStateToProps, null)(ResultListItems)

Мое действие в индексе. js в действиях папки, в этот момент у меня есть дата в URL

import axios from "axios";

export const GET_RESULTS = "GET_RESULTS";

const END_POINT = "http://data.nba.net/10s/20200203";

export function fetchResults() {
  return function(dispatch) {
      axios.get(`${END_POINT}`)
            .then(axiosResponse => {
        dispatch({ type: GET_RESULTS, payload: axiosResponse.data});
      });
  }
}

Мой редуктор => reducer_results:

const initialResults ={
  results: []
}

export default function (state = initialResults, action) {
  switch (action.type) {
    case GET_RESULTS:
      return {
        results: action.payload
      };
  }
  return state
}

Я импортирую в индекс. js в редуктор Папка:

import ReducerResults from "../reducers/reducer_results";

const rootReducer = combineReducers({
  resultsReducer: ReducerResults
});

export default rootReducer;

И мой контейнер - это результаты. js:

import { connect } from 'react-redux';
import ResultListItems from '../components/results_list_item'

class Results extends Component {
  render() {
    return (
      <div>
        <h1>App NBA</h1>
        <ResultListItems />
      </div>
    );
  }
}

export default connect()(Results);

Answer 1

Итак, у вас нет fetchResults в списке реквизитов, this.props.fetchResults не определено, потому что вы не связали действие с реквизитами компонента. Чтобы с этим справиться, нужно связать actionCreator. Используйте руководство: https://blog.benestudio.co/5-ways-to-connect-redux-actions-3f56af4009c8

Или просто сделайте так:

componentWillMount(){ const {dispatch} = this.props; dispatch(fetchResults()); }

Answer 2

Вы не отображаете свой API-вызов fetchResults на реквизиты. Попробуйте следующее. После сопоставления состояния с реквизитами сопоставьте диспетчеризацию и реквизиты в компоненте ResultListItems.

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        fetchResults : () => dispatch(fetchResults()),
        dispatch
    }
 }

, затем соедините его следующим образом.

export default connect(mapStateToProps, mapDispatchToProps)(ResultListItems)