反应、状态更改但不重新渲染

Question

有一个案例我很困惑。

我有一个对象redux状态：{show:true，creative:{name:'a'，tags:[t1，t2，t3]}。此对象已通过“react redux”的“connect”功能映射到道具。

当我改变属性“显示”或“creative.name”时，它确实会触发重新渲染。但是如果我将t0追加到"creative.tags"，它就不会运行re-渲染。

# 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

根据定义，缩写器必须由一个或多个纯函数组成。意味着state必须保持不可变的那些。您可以使用像... state这样的扩展操作来复制您的state对象，然后执行必要的操作。

Answer 2

不能直接改变状态，应始终创建副本并返回新状态。事实上，你是直接推到标签是造成问题的原因。

在返回状态对象之前创建一个新数组：

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