React-Redux - getting store from combined-reducers

Question

I've been writing some custom middleware. All I want to see is my store (as a chain of different state). Every reducer has its own state and combined it should give me my store.

import {createStore, applyMiddleware, compose} from 'redux';
import rootReducer from '../reducers';
import thunk from 'redux-thunk';
import {createLogger} from 'redux-logger';
import PouchDB from 'pouchdb';

const logger = createLogger({collapsed: true});

const customMiddleware = store => next => action => {
  console.log(store.getState());
  next(action);
}

export default function configureStore(initialState) {
    return createStore(rootReducer, applyMiddleware(customMiddleware));
}

This is what I get now:

This is what I expect to get:

After adding isImmutable i tried this:

const customMiddleware = store => next => action => {
  const state = store.getState();
  const storeTest = store.getState().toJS();
  console.log(storeTest);
  console.log(isImmutable(state) ? state.toJS() : state);
  next(action);
}

storeTest gives the wanted result, but the other log doesn't. Any idea how to fix this?

Answer 1

Looks like your redux state is an immutable Map rather than a plain object, so you'll need to convert it before logging it:

import { isImmutable } from 'immutable';

..

const customMiddleware = store => next => action => {
  const state = store.getState();
  console.log(isImmutable(state) ? state.toJS() : state);
  next(action);
};