如何在更改redux-toolkit状态时更改UI ?

Question

我想渲染我的组件时，我从另一个组件调度，我怎么能做到这一点?

需要渲染的组件:

const MessageComponent = (): JSX.Element => {
const [messages, setMessages] = useState<IMessageComponentState>({
messages: []
})
const message = useSelector((state: RootState) => state.message.messages);
useEffect(() => {
setMessages({
messages: message
})
console.log(message)
}, message);

return (
<>
{messages.messages}
<MyMessageComponent  message="some text"/>
<IncomeMessageComponent  message="some text2"/>
</>
)
}

Answer 1

useEffect中的Dependency必须放在[ ]中。查看更多:有条件地触发一个效果。

消息状态是一个数组，但是你设置了一个对象，从setMessages({ messages: message })更改为setMessages((mes) => [...mes, {messages: message}])

const MessageComponent = (): JSX.Element => {
const [messages, setMessages] = useState<IMessageComponentState>({
messages: []
})
const message = useSelector((state: RootState) => state.message.messages);
useEffect(() => {
setMessages((mes) => [...mes, {
messages: message
}])
console.log(message)
}, [message]); //<=== Put message in []

return (
<>
{messages.messages}
<MyMessageComponent  message="some text"/>
<IncomeMessageComponent  message="some text2"/>
</>
)
}

Answer 2

这会导致重新渲染。

如果你需要更多的重新渲染，像<MyMessageComponent />或'，他们只需要有某种形式的条件渲染附加到消息变量或使用它。

post-react-hooks redux的主要价值是渲染，或者更确切地说，是缺乏渲染;它只重新渲染绝对需要的组件，即直接需要更改的组件。