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;

以及我在一个完整的组合减速器文件中需要的所有减速器：

//{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，它是动作调用的，或者应该是。

//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处理作为参数传递的函数，以分派而不是对象。

React-Redux Action：'Dispatch'不是一个函数

1 个答案: