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

Question

此问题可能源于 redux-thunk 配置错误或对如何编写 thunk 的误解。我尝试了很多不同的方法，但据我所知，这应该可行。但是，我仍然收到一条控制台消息，说它触发了一个 undefined 的 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 仓库，如果对任何人有帮助的话：https://github.com/sambigelow44/portfolio-page

Answer 1

检查你的reducer名称，你export fetchAboutContent，但是import 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
      }));
  }
}

您还需要 return 从 axios 调用中承诺，只需添加 return 语句。

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

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

Redux firing undefined action while using redux thunk

javascript

reactjs

redux

redux-thunk

react-redux