реагировать, изменять состояние, но не перерисовывать

Question

есть случай, который я запутал.

У меня есть состояние избыточности объекта: {show: true, creative: {name: 'a', tags: [t1, t2, t3]}}. Этот объект был сопоставлен с реквизитами через функцию «connect» «act-redux ».

Когда я изменяю атрибут "show" или "creative.name", он вызывает повторную визуализацию. Но если я добавлю t0 в «creative.tags», он не запустит повторную визуализацию.

# reducer.js
# block code does not re-render ===========
state.creative.tags.push(t0)
return state
# end block code does not re-render =======

Я должен обойти, назначив новую переменную.

# reducer.js
# block code does re-render ===========
let new_state = Object.assign({}, state);
new_state.creative.dsp_tags.push(action.payload);
return new_state
# end block code does re-render =======

Не могли бы вы дать мне знать, как реагирует на изменение состояния?

Answer 1

Вы не можете изменить состояние напрямую, вы всегда должны создавать копию и возвращать новое состояние.Тот факт, что вы нажимаете непосредственно на теги, является причиной проблемы.

Создайте новый массив перед возвратом объекта состояния:

const newtags = [...state.creative.tags, action.payload];
let creative= Object.assign({}, state.creative, { tags: newtags } );
let new_state = Object.assign({}, state, { creative } );

Answer 2

Reducer по определению должен состоять из или набора Pure Functions. То есть те, где state должно оставаться immutable. Вы можете сделать копию вашего state объекта с помощью операции распространения, такой как ...state, а затем выполнить необходимую операцию.