First, I am not good at English. I'm sorry.

I am creating a daily and weekly quest check app for a game, and in this app, Users can check daily quests for each character after registering the user's character. However, if I check one character's daily quest, all other characters are checked. This phenomenon continues after :

1. Creating a character until the app's restart and
2. Pressing the app's full initialization button until the app's restart

I tried for more than a week. And I found out that this appears in the reducer of redux(react-redux). However, I couldn't understand it at all with my skills, so I posted a question.

First, images is: my imgur

And I thought you wouldn't understand it through pictures, so I prepared a YouTube link .

This is how the checkbox arrangement of the two characters actually changes in the redox devtool. I'm sorry that I haven't inserted the image yet.

const initialState = {
    LoaData: {},
    weekADay: '',
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'CHECKBOX_REDUX':
        return changeCheckbox(state, action);

    default:
        return state;
};

The above code is the reducer of react-redux. And the change Checkbox (state, action) function is as follows.

const changeCheckbox = (state, action) => {
    let {
        contentType,  // in this question, i use 'daily' only
        firstIndex,   // this used dividing content
        id,           // this is character's unique id(=new Date) and checked character
        value         // i send checkbox array ex) [false, false, false]. 
    } = action.payload;

    let newState = Object.assign({}, state);
    let character = newState.LoaData.characters[id];
    let filteredContents = character.contents[contentType];

    if(contentType === 'daily') { // for test, show only 'daily'
        let weekADay = newState.weekADay; // Mon or Tue or Wed ... 
        for(let i = 0; i < filteredContents[weekADay][firstIndex].value.length; i  ) { 
            filteredContents[weekADay][firstIndex].value[i] = value[i];
        }
    }
    return newState;
}

And the bottom is console.log(action.payload)

{
    "contentType": "daily",
    "firstIndex": 0,
    "id": "1632050917445",
    "value": [ true, false, false ],
}

Through many tests, it has been found that a problem occurs in the for statement. I also confirmed that the desired character's nickname changes normally. However, in the for statement, it was confirmed that the boolean of the same index of 'the different character's value' was also changed for each iteration.

please help me

redux: 4.1.1

react-redux: 7.2.4

react: 16.13.1

expo: 42.0.1

CodePudding user response：

It depends on how you creating and updating your characters in the rest of the store, but you might be sharing references for the characters objects between each other. You are mutating the store which you are not supposed to do in redux.

You call object.assign on the old state, and create newState. However, that only creates a new object for new state itself. All of its properties are still referring to the same objects as the old state.

Same with your assignments - let character = newState.LoaData.characters[id]; isn’t actually creating a new object at any point. You need to use object.assign for that, all the way down to the property you are changing, or use the spread operator.