React-boilerplate, reducer sending me a object instead of my default initialState?

Question

I'm not getting my initialState while ajax requests in the pending? Here is the snapshot of both actual data and reducer initialstate.

this.props of my application

here is my reducercode:

/*
 *
 * MainPage reducer
 *
 */
import { fromJS } from 'immutable';
import { LOAD_BANNERS, LOAD_BANNERS_SUCCESS, LOAD_BANNERS_ERROR, LOAD_CAROUSELS, LOAD_CAROUSELS_SUCCESS, LOAD_CAROUSELS_ERROR, LOAD_SIDEBAR, LOAD_SIDEBAR_SUCCESS, LOAD_SIDEBAR_ERROR } from './constants';

export const initialState = fromJS({
  bannerItems: [],
  carouselItems: [],
  sidebarItems: [],
  loadingBanners: false,
  errorBanners: true,
  loadingCarousels: false,
  errorCarousels: true,
  loadingSidebar: false,
  errorSidebar: true
});

function mainPageReducer(state = initialState, action) {
  switch (action.type) {
    case LOAD_BANNERS:
      return state.set('loadingBanners', true).set('errorBanners', false);
    case LOAD_BANNERS_SUCCESS:
      return state.set('loadingBanners', false).set('errorBanners', false).set('bannerItems', action.bannerItems);
    case LOAD_BANNERS_ERROR:
      return state.set('loadingBanners', false).set('errorBanners', action.error);
    case LOAD_CAROUSELS:
      return state.set('loadingCarousels', true).set('errorCarousels', false);
    case LOAD_CAROUSELS_SUCCESS:
      return state.set('loadingCarousels', false).set('errorCarousels', false).set('carouselItems', action.carouselItems);
    case LOAD_CAROUSELS_ERROR:
      return state.set('loadingCarousels', false).set('errorCarousels', action.error);
    case LOAD_SIDEBAR:
      return state.set('loadingSidebars', true).set('errorSidebar', false);
    case LOAD_SIDEBAR_SUCCESS:
      return state.set('loadingSidebars', false).set('errorSidebar', false).set('sidebarItems', action.sidebarItems);
    case LOAD_SIDEBAR_ERROR:
      return state.set('loadingSidebars', false).set('errorSidebar', action.error);
    default:
      return state;
  }
}

export default mainPageReducer;

Why reducer sending me an object(List) instead of my initialstate. here is code of my app.js where I have bind my dataTypes:

MainPage.propTypes = {
  // dispatch: PropTypes.func.isRequired,
  bannerItems: PropTypes.array,
  bannerItemsLoading: PropTypes.bool,
  carouselItems: PropTypes.array,
  carouselItemsLoading: PropTypes.bool,
  sidebarItems: PropTypes.array,
  sidebarItemsLoading: PropTypes.bool,
  loadBanners: PropTypes.func,
  loadCarousels: PropTypes.func,
  loadSidebars: PropTypes.func
};

score 0 · Answer 1 · answered Nov 28 '18 at 13:58

0

It is sending you an Immutable js object, try to do .toJS() on your List items, you will get back plain JavaScript object.(however it is not recommended to convert to and fro between immutablejs and plain js object, as it is a performance hit)

answered Nov 28 '18 at 13:58

Rohit Garg

782
5
18

You maybe right but it's not the problem. I'm getting results fine but after two renderings of list(object). I don't know why it's happening? – kropani Nov 29 '18 at 09:35
Here is the code what it should be and what I'm getting? Initial State what I **want** = `{bannerItems: [], carouselItems: [], sidebarItems: [], loadingBanners: false, errorBanners: true, loadingCarousels: false, errorCarousels: true, loadingSidebar: false, errorSidebar: true}` What I'm getting is `List {size: 0, _origin: 0, _capacity: 0, _level: 5, _root: undefined, …}` – kropani Nov 29 '18 at 09:37
@kropani, you are getting immutable object as initialState, because of use of `fromJS` in export const initialState = fromJS({.....}). Remove this `fromJS` and you will start getting plain js object. – Rohit Garg Nov 29 '18 at 10:28
Dear @Rohit Garg, Is there any solution, I can't remove formJS in mycode... – kropani Nov 29 '18 at 11:23
@kropani, what solution you want ? – Rohit Garg Nov 29 '18 at 11:25
I want my **initialState** as default state from **reducer** ? where can I add code that gives me my initalState back instead of rubbish _List_ (object) ? in first some rendering? – kropani Nov 29 '18 at 11:38

React-boilerplate, reducer sending me a object instead of my default initialState?

1 Answers1