Redux state array won't restart to its initial values

Question

I am using redux for my react native apps. I want to restart my redux state after user doing some action.

Here my initial state looks like

    initialState = {
            a: "",
            b: "",
            arrayC: [
             {
                x : "xValue",
                y : "",
                z : ""
             }
           ]
    }

After some user action, the state change its value to something like this

        {
                a: "ValueA",
                b: "ValueB",
                arrayC: [
                 {
                    x : "xValue",
                    y : "ValueY",
                    z : "ValueZ"
                 }
               ]
        }

I have action to reset current state to initial state like before, this is my action for reset

export const resetStateReducer = () => ({
    type: RESET_STATE
});

and inside my reducer

case RESET_BOOKING_REDUCER:
            return initialState;

Everything works fine, except for arrayC. It still hold the values before reset, like this

{
            a: "",
            b: "",
            arrayC: [
             {
                x : "xValue",
                y : "ValueY",
                z : "ValueZ"
             }
           ]
    }

What should I do? is my code or logic is wrong?

Thanks

EDIT This is my action code for update arrayC value

case ADD_ARRAY_C:
            var { index, newObject} = action.payload;
            var temp = state.arrayC;
            temp[index] = { ...temp[index], ...newObject};

            return {
                ...state,
                arrayC: temp,
            };

agree with JacobW. The reducer that makes the change for the user action is mutating `arrayC` instead of returning a new array. — lecstor, Dec 05 '18 at 02:43
trying using redux-logger and pass it as logger() as one of the middlewares of your store. report your findings :) — Franrey Saycon, Dec 05 '18 at 04:06
Please update your question with the action you are doing to mutate the state in the first place before reseting. — Suraj Malviya, Dec 05 '18 at 05:18

JacobW · Accepted Answer · 2018-12-05T03:32:58.683

2

Most likely your initial state is being mutated. Try to console log before you reset state and see what shows up.

How do I correctly clone a JavaScript object?

Check this out for how to clone an object for your initial state in the reducer.

edited Dec 05 '18 at 03:32

answered Dec 05 '18 at 02:12

JacobW

826
5
15

so, I should console my initial state before reset state, okay. Let me try. thanks – fajar ainul Dec 05 '18 at 03:28
To check and see if the state is being mutated. If it is you need to look at an article like this https://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object – JacobW Dec 05 '18 at 03:32
I have console my initial state, nothing changed. Still like fresh initial state, nothing is being mutated – fajar ainul Dec 05 '18 at 03:53
1

Sorry for late response. After doing deep trace for in my code, I figured out that the initial state is being mutated. Thanks – fajar ainul Dec 11 '18 at 03:36

Redux state array won't restart to its initial values

1 Answers1