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))
);
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.