Ошибка - Действия должны быть простыми объектами. Используйте пользовательское промежуточное ПО для действий asyn c

Question

Я пытаюсь реализовать излишек и бросить и возразить в магазине. Я получаю правильный объект, когда вызываю действие, но когда я вызываю store.dispatch (), хранилище никогда не обновляется. Он содержит только начальное состояние. Я думаю, что все перепробовал, и мне не хватает чего-то маленького. Любая помощь будет оценена! репо

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())
  };

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

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

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

  return {
    users: users,
  };
};

const mapDispatchToProps = dispatch =>  ({
  getUsers: () => store.dispatch( getUsers() )
})

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();

Приложение. 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

У вас есть

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

Но почему вы отправляете сюда? this.props.getUsers() уже отправлено в магазин, как определено в mapDispatchToProps. Так что все равно, что сказать dispatch( dispatch( getUsers() ) ).

. Здесь также может возникнуть проблема:

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

Я не понимаю, зачем вам нужен bindActionCreators. Я бы переписал так:

const mapDispatchToProps = dispatch =>  ({
  getUsers: () => store.dispatch( getUsers() )
})

Кроме того, теперь с dispatch в вашем mapDispatchToProps вы можете удалить все свои return dispatch из функции getUser. У вас должно быть только одно ключевое слово dispatch на одно действие:

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