Immutable, Why Does My Nested Object Using Fromjs Are Not Immutable When I Use Reselect

I have a bug with immutablejs and reselect. I have the following redux store in my reactjs application : /* * The reducer takes care of our data * Using actions, we can change o

Solution 1:

I cannot really explain why your example is not working for you... reselect code shows there is no magic for Immutable.js structure.

This code works for me perfectly (notice I removed one level of "factoring" selectors, so there is no selector = () => (state) => ... anymore; to be honest I can't say it's the root of your problem, but it's not necessary code neither):

const { createSelector } = require('reselect');
const { fromJS } = require('immutable');

const initialState = fromJS({
  login: {
    formState: {
      username: 'dka',
      password: '',
    },
    success: false,
    error: false,
    isCurrentlySending: false,
  }
});

constselectLogin = (state) => state.get('login');

const selectFormState = createSelector(
  selectLogin,
  (loginState) => loginState.get('formState')
);

const selectUsername = createSelector(
  selectFormState,
  (formState) => formState.get('username')
);

console.log(selectUsername(initialState));

Solution 2:

how did you set newFormState payload in action creator changeForm?

case CHANGE_FORM:
  return state
    .set('formState', action.newFormState);

check if action.newFormState is a plain object? if so you should explicitly set the selected fields.

// ..return state.setIn(['formState', 'username'], action.newFormState.username)