javascript - react Redux Action : 'Dispatch' is not a function

Question

首先还是要习惯 Redux。我有一个组件，它应该只加载数据以在组件加载时显示。我在商店中进行了 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;

以及我在完整的组合 reducer 文件中需要的所有 reducer :

//{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
});

我感兴趣的是 metaReducer，它是由一个 Action 调用的，或者它应该是这样。

//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;
  }
};

meta reducer 只是用来存放来自后端的信息，reducer 的每种情况都是从 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: dispatch is not a function at http://localhost:3000/static/js/bundle.js:73524:22"

它映射到 getMetaInsider 函数的 .catch block 。

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 处理作为参数传递给 dispatch 而不是对象的函数。