Redux使用redux thunk时触发未定义操作

Question

此问题可能是由于redux-thunk的配置错误或对如何编写thunk的误解。 我尝试了很多不同的方法，但是据我所知，这应该可行。 但是，我仍然收到一条控制台消息，说它触发了未定义的redux动作。

这是我的商店配置

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import App from './components/App';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

ReactDOM.render(
    <Provider store={ store }>
        <App />
    </Provider>,
    document.getElementById('rootElement')
);

这是我的动作：

import axios from 'axios';

export const GET_ABOUT_CONTENT_REQUEST = 'GET_ABOUT_CONTENT_REQUEST';
export const GET_ABOUT_CONTENT_FAILED = 'GET_ABOUT_CONTENT_FAILED';
export const GET_ABOUT_CONTENT_OK = 'GET_ABOUT_CONTENT_OK';

export const fetchAboutContent = () => {
  const url = `http://localhost:3000/about`;

  return (dispatch, getState) => {
    if (getState.isInitialized === true){
      console.log("desktop init should not be called when already desktop is init")
      return Promise.resolve();
    }

    if (getState.about.isLoading) {
      console.log('is loading');
      return Promise.resolve();
    }
    dispatch({ type: GET_ABOUT_CONTENT_REQUEST });
    axios.get(url)
      .then(res => dispatch({
        type: GET_ABOUT_CONTENT_OK,
        res
      }))
      .error(err => dispatch({ 
        type: GET_ABOUT_CONTENT_FAILED,
        err
      }));
  }
}

这是我在组件中触发操作的方法：

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from '../../actions/about';
import getAboutContent from '../../reducers';

class AboutMe extends React.Component {
  constructor(props) {
    super(props);
  }

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

  render() {
    return <div>{ this.props.content }</div>
  }
}

const mapStateToProps = (state) => ({
  content: {} || getAboutContent(state)
})

const mapDispatchToProps = (dispatch) => 
  bindActionCreators({ getAboutContent }, dispatch)

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

我已经为mapDispatchToProps尝试了很多配置，例如connect(..., { fetchData: getAboutContent })...等。 任何帮助是极大的赞赏。

编辑：这是git repo，如果这对任何人都有帮助： https : //github.com/sambigelow44/portfolio-page

Answer 1

检查您的减速器名称，导出fetchAboutContent ，但导入getAboutContent 。

Answer 2

操作文件中的代码似乎不正确。

getState是一个函数。

const state = getState();

更改以下代码。

import axios from 'axios';

export const GET_ABOUT_CONTENT_REQUEST = 'GET_ABOUT_CONTENT_REQUEST';
export const GET_ABOUT_CONTENT_FAILED = 'GET_ABOUT_CONTENT_FAILED';
export const GET_ABOUT_CONTENT_OK = 'GET_ABOUT_CONTENT_OK';

export const fetchAboutContent = () => {
  const url = `http://localhost:3000/about`;

  return (dispatch, getState) => {
    if (getState().isInitialized === true){
      console.log("desktop init should not be called when already desktop is init")
      return Promise.resolve();
    }

    if (getState().about.isLoading) {
      console.log('is loading');
      return Promise.resolve();
    }
    dispatch({ type: GET_ABOUT_CONTENT_REQUEST });
    axios.get(url)
      .then(res => dispatch({
        type: GET_ABOUT_CONTENT_OK,
        res
      }))
      .error(err => dispatch({ 
        type: GET_ABOUT_CONTENT_FAILED,
        err
      }));
  }
}

另外，您需要从axios调用返回诺言，只需添加return语句。

return axios.get(url)
  .then(res => dispatch({
    type: GET_ABOUT_CONTENT_OK,
    res
  }))
  .error(err => dispatch({ 
    type: GET_ABOUT_CONTENT_FAILED,
    err
  }));