Redux and redux saga removes values from store

Question

Searched for a while a question like this but couldn't find anything. Basically when the user logs in into the session the settings fetch is called from redux saga and then I put those values in the appropriate store, BUT when I do another action that does't even call a function from that reducer, magically I see my items disappear from that store leaving just 3 out of 15 objects. Searched the whole app to see if I call the setSettings somewhere else but no, just in 1 place (saga). Screenshots and code below: the setadditionalinfo is a function from the interface reducer that doesn't even have a saga!

functionality.saga.js

export function* settingsStartProcess() {
  try {
    const response = yield call(SYSTEMCALLS.fetchSettings)
    yield put(setSettings(response.data));
  } catch (error) {
    yield put(setFetchSettingsFailure(error.message));
  }
}

export function* fetchSettingsStart() {
  yield takeLatest(
    FunctionalityActionTypes.FETCH_SETTINGS_START,
    settingsStartProcess
  );
}


export function* functionalitySagas() {
  yield all([
    call(fetchSettingsStart),
  ]);
}

functionality.reducer.js

const functionalityReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case FunctionalityActionTypes.SET_SETTINGS:
      return {
        ...state,
        isLoading: false,
        functions: convertFunctions(action.payload.funzionalita, true),
        branches: action.payload.sigleRami
      };
    case FunctionalityActionTypes.FETCH_SETTINGS_START:
      return {
        ...state,
        isLoading: true
      };
    case FunctionalityActionTypes.FETCH_SETTINGS_FAILURE:
      return {
        ...state,
        isLoading: false,
        error: action.payload
      };
    default:
      return state;
  }
};

Want to also add this user.selector code if it can interfere with the state, but shouldn't:

export const selectCleanUserBranches = createSelector(
  [selectUser, selectFunc],
  (user, func) => createCleanDataFromUserSigle(user.currentUser.sigle, func.branches)
);

export const selectTreeDataUserBranches = createSelector(
  [selectUser, selectFunc],
  (user, func) => convertSigleToTreeData(createCleanDataFromUserSigle(user.currentUser.sigle, func.branches))
);

iorabiadopo iorabiadopo · Accepted Answer · 2020-11-06T16:32:40

Found the solution for anyone that had the same problem. Apparently I skipped a very important part where selectors return a reference and not a clean object. So wrap your functions that may change the selector in import {produce} from 'immer' or in the function call an Object.assign() to make a non ref clone.

Redux and redux saga removes values from store

1 Answers