Cleaning Redux State

Question

Before begin, I clarify that I've read a lot before make this question, even How to reset the state of a Redux store?, said that, let's go.

I'm working with React & Redux time ago, and normally when I create a state I don't use a void new object as initial state, instead i make a structurated initial state, example:

const initialState = {
  objectWithSomething: null,
  array: [],
  someString: ''
}
const someReducer = (state=initialState, action) => {
   switch(action.type) {
     case 'meh':
       // do something
       return { ...state, someString: ... }
   }
}

Normally, when i want to clean the state, just need to return the vanilla initialState and that's all, but this case is different, for some reason that I don't understand the state is partially cleaned, like... just some bare items are reseted but arrays, object and some other nested items aren't cleaned, which is very weird, if i compare the state (inside the reducer) vs the initialState (the constant) they are the same, in some point maybe I'm mutating the state or something? I don't know, but let me show my structure:

Note: this is a gist because is a large and repetitive file (is a test, i'm trying to make some kind of new approach before any optimization).

reducer.js initialState.js

Well, even taking the approach exposed by Dan Abramov in the mentioned question above, the state doesn't clean well, this is the state after the cleaning (returning the initialState or using the Abramov approach):

newState.js

Can anyone give me some clue, thought or something?

Did you try adding redux logger in order to see if some action you don't know gets dispatched? — Francesco Meli, Feb 22 '18 at 18:02
When you reset try returning only initial_state and not {...initial_state} — Francesco Meli, Feb 22 '18 at 18:06

score 1 · Accepted Answer · answered Feb 22 '18 at 18:10

For what I understand, you are mutating the state in multiple places:

Example:

if (action.type === errors.GENERAL) {
    const errorsState = state.errors //errorState is a reference
    errorsState.general = action.payload //you mutate a property inside of it
    return { ...state, errors: errorsState } //and return the reference itself
}

Instead, you should:

if (action.type === errors.GENERAL) {
  const newErrorsState = {...state.errors, general: action.payload}
  return { ...state, errors: newErrorState }
}

Cleaning Redux State

1 Answers1