Q:

In Redux, reducer doesn't recognise the action object

I'm using Redux for a React project. For some reason, my reducer doesn't recognise the action type sent to it or even the action itself. I get this error TypeError: Cannot read property 'type' of undefined. And I know I'm using dispatch.
The api from the server works fine, I've tested through Postman.
But I don't understand what's happening with redux.
Please, can someone advise me?
Before stamping down my question, I've read many SO posts that looks similar but none has answered my question, hence why I'm asking it here.
Thanks.
Action:
import axios from 'axios';

export const GET_ALL_USERS = 'GET_ALL_USERS';

export const showAllUsers = () => dispatch => {
  console.log('USERS ACTION');

  return axios
    .get('/api/users/all')
    .then(res => {
      console.log('GETTING ALL USERS ACTION', res);

      return dispatch({
        type: GET_ALL_USERS,
        payload: res.data
      });
    })
    .catch(err => console.log('Oops! Cannot get any users.'));
};

Reducer:
import { GET_ALL_USERS } from '../actions/usersActions';

const InitialState = {
  users: null,
  loading: false
};

export default function(state = InitialState, action) {
  console.log('USERS REDUCER', action);

  switch (action.type) {
    case GET_ALL_USERS:
      return {
        ...state,
        users: action.payload
      };
    default:
     return state;
  }
}

React:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import './index.css';
import App from './containers/App';
import registerServiceWorker from './registerServiceWorker';

import rootReducer from './reducers';

let middleware = [thunk];

const store = createStore(
  rootReducer,
  {},
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

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

React component:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import { showAllUsers } from '../../actions/usersActions';

export class Admin extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }

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

  render() {
    const { users } = this.props;
    console.log(`All users in admin`, this.props.users);

    return (
      <div className="admin">
        <h1 className="admin__title">Admin Board</h1>
        {this.props.users.map(user => {
          return (
            <article>
              <img src={user.avatar} alt={user.username} />
              <p>{user.firstName}</p>
              <p>{user.lastName}</p>
              <p>{user.username}</p>
              <p>{user.email}</p>
            </article>
          );
        })}
      </div>
    );
  }
}

const mapStateToProps = state => ({
  users: state.users
});

export default connect(mapStateToProps, { showAllUsers })(Admin);

A:

showAllUsers is async action. You need some middleware to dispatch async action.
Use redux-thunk or redux-saga and integrate it with store.
It will help to perform asynchronous dispatch
import thunkMiddleware from 'redux-thunk';
let middleWares = [thunkMiddleware];

const store = createStore(
  rootReducer, applyMiddleware(...middleWares)
)

If you dispatch async action in synchronous way, the error TypeError: Cannot read property type of undefined will be thrown.

