Компонент не перерисовывается после модификации редукса

Я использую Redux в своем приложении, и сначала он работает так, как я хочу. Когда я добавляю что-то в свое состояние через редьюсер, мой компонент перерисовывается так, как я хочу. Но когда я только изменяю значение свойства внутри состояния, мой компонент не перерисовывается.

Если вам нужен код, я могу загрузить его (или некоторые части), но я думаю, что проблема скорее в образе мышления.

Пример моего состояния

state = {
    "BaliseSeen": {
        "Marseille": [
            {
                "id": "5566",
                "nom": "Notre dame de La Garde",
                "type": "Monument",
                "vue": true,
            },
        ],
        "Toulon": [
            {
                "id": "1122",
                "nom": "Isen Yncrea Méditerranée",
                "type": "Monument",
                "vue": true,
            },
            {
                "id": "3344",
                "nom": "Appartement n°69",
                "type": "Monument",
                "vue": true,
            },
            {
                "id": "6677",
                "nom": "Mairie",
                "type": "Info",
                "vue": false,
            },
        ],
    },
    "Medailles": [
        {
            "ville": "Toulon",
        },
    ],
    "User": [],

}

Когда я добавляю что-то новое, оно работает и перерисовывается:

nextState = {...state,
      BaliseSeen: {
               ...state.BaliseSeen, [city]: [...state.BaliseSeen[city], { id: action.value.id, type: action.value.type, nom: action.value.nom, vue: action.value.vue }]
      }
}

Но когда я хочу только изменить свойство vue с false на true вот так, это работает (когда я проверяю состояние в приложении, модификация применяется, но мой компонент не перерисовывается:

BaliseSeenIndex = state.BaliseSeen[city].findIndex(item => item.id === action.value.id)
nextState = state
nextState.BaliseSeen[city][BaliseSeenIndex].vue = true

(Я также пытался удалить элемент из своего состояния и добавить его после, но, как и раньше, он работает без рендеринга моего компонента). Поэтому я не знаю, как сказать, что состояние изменено.


react-native javascript redux react-redux redux-reducers
person Tomitom    schedule 11.06.2021    source источник
comment
Не могли бы вы показать больше кода, касающегося части, в которой вы изменяете состояние?   -  person Akash    schedule 11.06.2021
comment
Состояние Redux не должно быть изменено. nextState = {...state} должен решить вашу проблему redux.js.org/faq/immutable-data stackoverflow.com/a/48819216/5793132 Если вы действительно хотите изменить состояние, вам не следует использовать избыточность, вместо этого используйте mobX mobx.js.org/the-gist-of-mobx.html   -  person Uğur Eren    schedule 11.06.2021
comment
@UğurEren OP также может использовать набор инструментов immer или redux или просто писать код, который не мутирует.   -  person HMR    schedule 11.06.2021
comment
Использование immer по-прежнему создает неизменяемый объект. Я дал вариант mobx в качестве альтернативы, если оператор really хочет использовать мутации, а также его преимущества и недостатки. Но вы также правы, используя immer op, вы можете просто написать изменяемый код в своем редюсере, но результат все равно будет неизменным.   -  person Uğur Eren    schedule 11.06.2021

Ответы (1)


arrow_upward
0
arrow_downward

Как прокомментировал; вы не должны мутировать, вместо этого сделайте следующее

//not sure where cityp comes from but I assume it is from the action
return {
  ...state,
  BaliseSeen: {
    ...state.BaliseSeen,
    [city]: state.BaliseSeen[city].map((item) =>
      item.id !== action.value.id
        ? item//not the item we want to edit, return unchanged
        : {//item we are looking for, return changed copy
            ...item,
            vue: true,
          }
    ),
  },
};
person HMR    schedule 11.06.2021
comment
Большое спасибо ! Я не знал, как это сделать, и ваш ответ был идеальным. Еще раз спасибо :) - person Tomitom; 11.06.2021
comment
@Tomitom Неизменяемые шаблоны обновления можно найти здесь - person HMR; 11.06.2021