我如何在更改 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

这将导致 re-render。

如果您需要更多 re-render，例如 <MyMessageComponent /> 或 `，它们只需要将某种形式的条件呈现附加到消息变量或使用它。

post-react-hooksredux 的主要价值在于渲染，或者更确切地说，是缺乏渲染；它只是 re-render 绝对必须的，即需要直接更改的组件。

Answer 2

Dependency在useEffect里面要放[ ]。查看更多：Conditionally firing an effect.

而消息状态是一个数组，但您设置了一个对象，从 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"/>
        </>

    )
}

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

How i can change UI on change redux-toolkit state?

javascript

typescript

reactjs

redux-toolkit