Error: Actions must be plain objects, Use custom middleware for async actions

Question

我已经花了几天时间寻找这个问题的答案，但我仍然不知道我做错了什么。我以完全相同的方式设置了其他项目，这些项目从 api 中获取数据很好。所有其他答案都说了动作需要 return 对象的变化，据我所知是

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { createLogger } from 'redux-logger';
import Thunk from 'redux-thunk';
import reducer from './reducers/reducer';
import App from './App';

import './css/index.css';
import './css/font-awesome.css';
import './css/bulma.css';

const logger = createLogger();
const store = createStore(reducer, applyMiddleware(Thunk, logger));

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

组件调用 mapDispatchToProps

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { searchRepositories } from '../actions/searchActions';

class Results extends Component {

  componentDidMount() {
    this.props.searchRepositories();
  }

  render() {
    return (
      <div>Some Stuff</div>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    searchRepositories: () => {
      dispatch(searchRepositories());
    },
  };
};

const mapStateToProps = (state) => {
  return {
    repositories: state.repositories,
  };
};


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

减速器：

import * as types from '../actions/types';
import initialState from './INITIAL_STATE';


function reducer(prevState = initialState, action) {
  if (!action) return prevState;

  switch (action.type) {
    case types.FETCH_REPOS_REQUEST:
      return { ...prevState, loading: true };

    case types.FETCH_REPOS_SUCCESS:
      return {
        ...prevState,
        loading: false,
        repositories: action.data,
        error: '',
      };

    case types.FETCH_REPOS_ERROR:
      return { ...prevState, error: 'Encountered an error during GET request' };

    default:
      return prevState;
  }
}

export default reducer;

动作创作者：

import axios from 'axios';
import * as types from './types';
import { ROOT } from '../config';


export function searchRepositoriesRequest() {
  return {
    type: types.FETCH_REPOS_REQUEST,
  };
}

export function searchRepositoriesSuccess(repositories) {
  return {
    type: types.FETCH_REPOS_SUCCESS,
    data: repositories,
  };
}

export function searchRepositoriesError(error) {
  return {
    type: types.FETCH_REPOS_ERROR,
    data: error,
  };
}

export function searchRepositories() {
  return function (dispatch) {
    dispatch(searchRepositoriesRequest());
    return axios.get(`${ROOT}topic:ruby+topic:rails`).then((res) => {
      dispatch(searchRepositoriesSuccess(res.data));
    }).catch((err) => {
      dispatch(searchRepositoriesError(err));
    });
  };
}

我有这个 axios api 请求使用 react this.state 工作，我只是把它放在组件中并挂载了。如果有人能看到我哪里出错了，那将对我有很大帮助。

Answer 1

好的，看起来我使用的是早期版本的 redux，我安装的 redux-thunk 版本不喜欢它！我更新到最新版本的 redux，它现在可以正常调用了。

我仍然不确定为什么安装了旧版本的其他项目仍然有效...

Error: Actions must be plain objects, Use custom middleware for async actions

Error: Actions must be plain objects, Use custom middleware for async actions

reactjs

redux

redux-thunk