错误-动作必须是普通对象。使用自定义中间件执行异步操作

Question

我正在尝试实现redux并将对象抛出存储。当我调用动作时，我得到正确的对象，但是当我调用store.dispatch（）时，我得到的动作必须是普通对象。我想我已经尝试了一切，并且缺少一些小东西。任何帮助，将不胜感激！repo

signUp.js

import {getUsers} from "../actions/getUsersActions";
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import store from '../store';

class SignMo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      users: [],
      firstName: '',
      lastName: '',
      email: '',
      username: '',
      password: ''
    }

  }

  async getUsers () {
    await this.props.getUsers()
      .then(response => {
        this.setState({users: response.users.users});
      })
      .catch(function (error) {
        console.log(error);
      });
    console.log('store =>', store.getState())
  };

  throwInStore = () => {
    store.dispatch(
      this.props.getUsers()
    );
  };

  componentDidMount() {
    this.getUsers = this.getUsers.bind(this);
    this.getUsers();
    this.throwInStore();
  }

  render(){
     return(
       <stuff/>
    )
  }

const mapStateToProps = state => {
  const { users } = state;

  return {
    users: users,
  };
};

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      getUsers,
    },
    dispatch
  );

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

getUsersReducer.js

import { combineReducers } from "redux";

import {USERS_FAILURE} from "../actions/getUsersActions";
import {USERS_SUCCESS} from "../actions/getUsersActions";

let INITIAL_STATE ={
  users:[],
  isloading: false,
  errorResponse: false,
  errorMessage: null,
};

const getUsersReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    // Take all returned user info and put it in store
    case USERS_SUCCESS:
      return {
        ...state,
        //type: USERS_SUCCESS,
        isLoading: false,
        errorResponse: false,
      };
    // Extract error message to display
    case USERS_FAILURE:
      return {
        ...state,
        isLoading: false,
        errorResponse: true,
        errorMessage: action.error
      };
    // Don't think this gets called
    default:
      return state;
  }
};

export default combineReducers({
  users: getUsersReducer
});

getUsersReducer

import axios from "axios";


const url = "http://localhost:3333";

export const USERS_SUCCESS = "USERS_SUCCESS";
export const USERS_FAILURE = "USERS_FAILURE";

export const usersSuccess = users => {
  return {
    type: USERS_SUCCESS,
    users
  };
};

export const usersFailure = error => {
  return {
    type: USERS_FAILURE,
    error
  };
};

export const getUsers = () => {
  return dispatch => {
    return axios
      .get(`${url}/users`)
      .then(response => {
        console.log('success', JSON.stringify(response));
        return dispatch(usersSuccess(response.data));
      })
      .catch(error => {
        console.log('err', error.response.data.message);
        return dispatch(usersFailure(error.response.data));
      });
  };
};

store.js

import { composeWithDevTools } from "redux-devtools-extension";
import createSagaMiddleware from "redux-saga";
import thunk from "redux-thunk";
import reducer from "./reducer";

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  reducer,
  composeWithDevTools(applyMiddleware(sagaMiddleware, thunk))
);

export default store;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'));

serviceWorker.unregister();

App.js

import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";
import { Provider } from 'react-redux'
import store from "./store";






export default function App() {
  return (
    <Provider store={store}>
      <Router>
        <div>
          <Switch>
            <Route path="/login">
              <Login />
            </Route>
            <Route path="/home">
            <div className='primaryContainer'>
            <EngagementBar/>
            <Home />
            </div>
            </Route>
            <Route path="/SignUp">
              <SignUp className="centerSignUp" />
            </Route>
            <Route path="/Tags">
              <Tags />
            </Route>
              <Route path="/signMo">
                <SignMo />
              </Route>
            <Route path="/search">
              <div className="primaryContainer"><Search /></div>
            </Route>
            <Route path="/profile">
              <Profile />
            </Route>
            <Route path="/upload">
              <Upload />
            </Route>
            <Route path="/notifications">
              <Notifications />
            </Route>
            <Route path="/information">
              < Information />
            </Route>
            <Route path="/"> {/*must be last !!!*/}
              <Load />
            </Route>
          </Switch>
        </div>
      </Router>
    </Provider>
  );
}

Answer 1

快速看过我问：你为什么要做一个

return dispatch(usersSuccess(response.data))

这将返回一个函数，而不是对象。您是否尝试过

dispatch(usersSuccess(response.data))

这将调用您的函数，该函数将为您返回对象。