Redux, Redux middleware, immutablejs, axios

redux-demo.js

import {createStore, combineReducers, applyMiddleware} from 'redux';

import {List, Map} from 'immutable';
import axios from 'axios';
// The user reducer
const usersReducer = (state= List(), action) => {
    switch (action.type) {
        case 'GET_USERS':
            console.log('action', action);
            return List(action.payload.data.data);
        case 'ADD_USER':
            return state.push(action.payload);
        case 'DELETE_USER':
            return state.filter((user) => user.id !== action.payload.id);
        default:
            return state;
    }
};
// The post reducer
const postReducer = (state=List(), action) => {
    switch(action.type) {
        case 'ADD_POST':
            return state.push(action.payload);
        default:
            return state;
    }
};

// The root reducer
const reducer = combineReducers({
    users: usersReducer,
    posts: postReducer
});

// the middleware logger
const logger = store => next => action => {
    if(action.type) {
        document.getElementById('title').innerHTML = action.type;
    }
    return next(action);
};
//The time out scheduler middleware
const timeoutScheduler = store => next => action => {
  if (!action.meta || !action.meta.delay) {
    return next(action)
  }

  let timeoutId = setTimeout(
    () => next(action),
    action.meta.delay
  )

  return function cancel() {
    clearTimeout(timeoutId)
  }
}
// The thunk reducer
const thunk = store => next => action =>
  typeof action === 'function'
    ? action(store.dispatch, store.getState)
    : next(action)

const promise = store => next => action => {
    if(action.payload instanceof Promise) {
        action.payload.then((resp) => {
            action.payload = resp;
            next(action);
        })
        .catch((err) => {
            action.type = `${action.type}_FAILED`;
            next(action);
        });
    } else {
        next(action);
    }
}

const store = createStore(reducer, applyMiddleware(timeoutScheduler, logger, thunk, promise));

store.subscribe(() => {
    console.log('Something happen!!');
    console.log(store.getState());
    document.getElementById('logs').innerHTML = JSON.stringify(store.getState());
});

const addUser = (name, id, bio) => ({
    type: 'ADD_USER',
    payload: {
        name,
        id,
        bio
    },
    meta: {
        delay: 5000
    }
});

const deleteUser = (id) => ({
    type: 'DELETE_USER',
    payload: {
        id
    },
    meta: {
        delay: 15000
    }
});

const addPost = (title, resume) => ({
    type: 'ADD_POST',
    payload: {
        title,
        resume
    }
});

const addPostAsync = (title, resume) => {
    return dispatch => {
        return setTimeout(() => {
            return dispatch(addPost(title, resume));
        }, 30000)
    }
}

const getUsers = () => {
    return dispatch => {
        return dispatch({
            type: 'GET_USERS',
            payload: axios('https://reqres.in/api/users')
        })
    }
}

store.dispatch(addUser('Med', 1, 'Full Stack'));

store.dispatch(addUser('Maro', 0, 'HTML Dev'));
store.dispatch(getUsers());

store.dispatch(deleteUser(1));

store.dispatch(addPost('Js', 'Js new technology'));
store.dispatch(addPostAsync('Thunk', 'Js new technology'));