Issue with Immutable.js

I’m trying to configure immutable.js with next-redux-wrapper@2.0.0-beta.4 - I followed your suggestion in the docs, but I’m still having lots of issues. It seems that on the server the serialize function is run and state on the server is immutable. However, on the client deserialize is run and state is a POJO. (I’m also using next-redux-saga).

What I see happening is that on initial load the site is SSR and all the data appears correctly. However, after a few second the component re-renders client side and then I get an error that I cannot get values from the items via .get.

I added some console.log statements and see /// serialize state 3 times on the server followed by /// deserialize state 3 times on the client. Once I see that log in the client, that’s when the page errors out and the data in the component is no longer immutable.

P.S. I tried using fromJS and toJS as the serialize and deserialize functions, but for some reason that didn’t work. Using json-immutable from the readme seems to work, initially.

I’ll share some code snippets:

store.js

export function configureStore (initialState = {}) {
  const store = createStore(
    rootReducer,
    initialState,
    bindMiddleware([sagaMiddleware])
  )

  store.runSagaTask = () => {
    store.sagaTask = sagaMiddleware.run(rootSaga)
  };

  // run the rootSaga initially
  store.runSagaTask();
  return store;
}

_app.js

import withRedux from 'next-redux-wrapper';
import nextReduxSaga from 'next-redux-saga';
import { configureStore } from 'store';
const { serialize, deserialize } = require('json-immutable');

...

export default withRedux(configureStore, {
  serializeState: state => {
    console.log('/// serialize state');
    return serialize(state);
  },
  deserializeState: state => {
    console.log('/// deserialize state');
    return deserialize(state)
  }
})(nextReduxSaga(MyApp));

pages/index.js

export class Homepage extends React.Component {
  static async getInitialProps({ store, isServer }) {
    const today = moment().format('MM-DD');
    const items = getItems(store.getState());

    if (!items.size) {
      store.dispatch(requestItems(today));
    }

    return { items };
  }

  render () {
    const { items } = this.props;
    items.map(t => {
      console.log(Immutable.Iterable.isIterable(t));
      return t;
    })
    return (
      <h1>test</h1>
    )
  }
}

export default connect(createStructuredSelector({
  items: getItems,
}))(Homepage);

Thanks for any help. Lmk if you need more context.

[kirill-konshin]

Done.

FYI serialization is always a conversion of a complex object into something simple.

Wiki: In computer science, in the context of data storage, serialization is the process of translating data structures or object state into a format that can be stored (for example, in a file or memory buffer) or transmitted (for example, across a network connection link) and reconstructed later (possibly in a different computer environment).

[jasonleibowitz]

My initial assumption was that you serialize JSON into the more complex immutable, and deserialize immutable into JSON.

If people are confused by this my recommendation would be to state this a bit more explicitly in that part of the docs or maybe even an example with Immutable:

export default withRedux(makeStore, {
  serializeState: state => state.toJS(),
  deserializeState: state => fromJS(state),
})(MyApp);