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

检查你的reducer名字，你导出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 调用中返回 promise，只需添加 return 语句。

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