How to initialize redux with immutable object

[amorphius]

Is it possible or I'm doing smt wrong?

let initialState = immutable.fromJS({some_store: "some initial data"});
const redux = createRedux(stores, initialState);
...
export function some_store(state, action) {
    // state is undefined here
}

[emmenko]

I think what you want is something like this

// stores/some-store.js
import Immutable from 'immutable'

const { Map, List, fromJS } = Immutable
const initialState = Map({
  foo: 'bar',
  fooList: List()
})

export function someStore (state = initialState, action) {
  if (action.type === 'FOO') {
    return state.set('foo', fromJS(action.foo))
  }
  if (action.type === 'FOO_LIST') {
    return state.set('fooList', fromJS(action.fooList))
  }

  return state
}

// stores/index.js
export { default as someStore } from './some-store'

// application.js
import * as stores from './stores'

const redux = createRedux(stores)

[gaearon]

You should let stores define their own initial state using default parameter like @emmenko showed.

The initialState argument is only meant to be used for rehydrating state from server or localStorage. (@acdlite, we might want to explain this in docs.)

That said, what you tried should work. Can somebody investigate?

[amorphius]

No, what I tried does not work. I just want to create initial data for all stores in one place. I guess this is what I shouldn't do.

[gaearon]

I just want to create initial data for all stores in one place. I guess this is what I shouldn't do.

It's up to you. I find it better to divide the initial data.

Still, if something doesn't work, let's keep it open? I'll revisit next week and see why it did not work.

[leoasis]

The problem is with composeStores that is assuming the root state is a plain JS object, and accessing the properties with state[key], which fails with Immutable.Map. I think it may work with Immutable.Record since that makes the fields accessible via regular JS properties.

There may be other places where it's assuming a plain object though.

[gaearon]

Oh. That's a great catch! Thanks for explaining. This makes perfect sense.

[pierregm]

Using connectors also fails for the very same reason: isPlainObject(Immutable.Record) === false .

[gaearon]

@pierregm This is actually correct. If it spread the Record properties over the component props, that wouldn't work anyway. It is up to you to write select={state => state.get('something').toJS()}.

[owais]

I was able to get it to work like this,

// store
const initialState = Immutable.fromJS({}).toOrderedMap();

export default function streamStore(state = initialState, action) {
  switch (action.type) {

    case actionTypes.FETCH_STREAM_DONE:
      var streamMap = {};

      for (var i in action.stream_data) {
        var item = action.stream_data[i];
        streamMap[item.id] = item;
      }
      return state.merge(Immutable.fromJS(streamMap).toOrderedMap());

    default:
      return state
  }
};

// select
function select(state) {
  return {stream: state.stream.toList()}
}

It works perfectly but it ends up re-rendering all items in the stream (a list view). I was wondering how one could implement something that compares the old state vs new state at store level and invalidates the need to render any components right there when there are no changes to the data. NuclearJS does this with Immutable structures. What would the recommended way be to implement something like that in redux?