Действие React-Redux: «Dispatch» не является функцией

Question

Все еще привыкаешь к Redux, сначала.У меня есть компонент, который должен просто загрузить данные для отображения при загрузке компонента.У меня есть настройка приставки с магазином:

//store.js
import { createStore, applyMiddleware, compose } from 'redux';

import logger from 'redux-logger';
import thunk from 'redux-thunk';
import root from './reducers';

const middleware = [thunk, logger];

const initState = {};

const store = createStore(
  root,
  initState,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;

и все нужные мне редукторы в полном файле комбайновых редукторов:

//{projectFolder}/reducers/index.js
import { combineReducers } from 'redux';

import authReducer from './authReducer';
import errorsReducer from './errorReducer';
import suggestionReducer from './suggestionReducer';
import insiderReducer from './insiderReducer';
import connectionReducer from './connectionReducer';
import outsiderReducer from './outsiderReducer';
import contactReducer from './contactReducer';
import metaReducer from './metaReducer';

export default combineReducers({
  auth: authReducer,
  errors: errorsReducer,
  suggestions: suggestionReducer,
  insider: insiderReducer,
  connection: connectionReducer,
  outsider: outsiderReducer,
  contact: contactReducer,
  meta: metaReducer
});

Интересующий меняin - это metaReducer, который вызывается действием, или так и должно быть.

//metaReducer.js
import {GET_INSIDER_META_INFORMATION, GET_OUTSIDER_META_INFORMATION } from '../actions/types';

const initState = {
  insider: {},
  outsider: {}
};

export default (state = initState, { type, payload }) => {
  switch (type) {
    case GET_INSIDER_META_INFORMATION:
        return{
            ...state,
            insider: payload
        }
    case GET_OUTSIDER_META_INFORMATION:
        return {
            ...state,
            outsider: payload
        }
    default:
      return state;
  }
};

Мета-редуктор предназначен только для хранения информации, поступающей от серверной части, и каждый случай редуктора вызывается из файла actions/meta.js, который выглядит следующим образом:

//{projectfolder}/actions/meta.js
import {
  GET_INSIDER_META_INFORMATION,
  GET_OUTSIDER_META_INFORMATION,
  POPULATE_ERRORS
} from "./types";
import Axios from "axios";

export const getMetaInsider = (dispatch) => {
  return Axios.get("meta/insiders")
    .then(res =>
      dispatch({ type: GET_INSIDER_META_INFORMATION, payload: res.data })
    )
    .catch(err =>
      dispatch({ type: POPULATE_ERRORS, payload: err.response.data })
    );
};

export const getMetaOutsider = (dispatch) => {
  return Axios.get("meta/outsiders")
    .then(res => {
      dispatch({ type: GET_OUTSIDER_META_INFORMATION, payload: res.data });
    })
    .catch(err =>
      dispatch({ type: POPULATE_ERRORS, payload: err.response.data })
    );
};

и Мой компонент, который вызывает все это, настроен, как показано ниже:

//{projectfolder}/components/home.js
import React, {Component} from 'react';
import {Card, CardTitle, CardSubtitle, CardBody} from 'reactstrap';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import {getMetaInsider, getMetaOutsider} from '../actions/meta';

class Home extends Component{
  constructor(props){
    super(props);
    this.state = {
      insider:{},
      outsider: {}
    }
  }
  componentDidMount() {
    console.log(this.props);
    this.props.getMetaInsider();
    this.props.getMetaOutsider();
  }
  render(){
    let {insiders, outsiders} = this.state;
    return(
      <React.Fragment>
        {*/ omitted as it's not really an issue right now, data is more important than layout /*}
      </React.Fragment>
    )
  }
}

const mapState = state => {
 console.log(state);

 return {
  insider: state.meta.insider,
  outsider: state.meta.outsider
 }
};

Home.propTypes = {
  getMetaInsider: PropTypes.func.isRequired,
  getMetaOutsider: PropTypes.func.isRequired,
  insider: PropTypes.object.isRequired,
  outsider: PropTypes.object.isRequired
};

export default connect(mapState, {getMetaInsider, getMetaOutsider})(Home);

Поэтому, когда компонент загружается, у меня возникает ужасно странная проблема, которая выглядит так, как будто вызывается jquery, и он импортируется вмой файл App.js для начальной загрузки.Однако основная ошибка заключается в следующем:

"TypeError: отправка не является функцией в http://localhost:3000/static/js/bundle.js:73524:22"

, которая отображается в блок .catch блока getMetaInsider функция.

Answer 1

Вы должны сделать что-то вроде этого:

export const getMetaOutsider = () => {
  return (dispatch) => {
    Axios.get("meta/outsiders")
    .then(res => {
      dispatch({ type: GET_OUTSIDER_META_INFORMATION, payload: res.data });
    })
    .catch(err =>
      dispatch({ type: POPULATE_ERRORS, payload: err.response.data })
    );
  }
};

Попробуйте, это должно работать.Отзывы приветствуются.redux-thunk обрабатывает функции, передаваемые в качестве аргумента для отправки вместо объектов.