Quiero volver a renderizar mi componente cuando estoy despachando desde otro componente, ¿cómo puedo hacerlo?
Componente que necesita volver a renderizar:
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"/> </> ) }Esto hará que se vuelva a renderizar.
Si necesita más para volver a procesar, como <MyMessageComponent /> o `, solo necesitarían tener alguna forma de representación condicional adjunta a la variable del mensaje o usarla.
El valor principal de post-react-hooks redux es el renderizado, o más bien, la falta del mismo; solo vuelve a renderizar lo que es absolutamente necesario, es decir, los componentes que requieren el cambio directamente.
Dependency en useEffect tiene que ponerse dentro de [ ] . Ver más: Disparar condicionalmente un efecto .
Y el estado de los mensajes es una matriz, pero establece un objeto, cambia de setMessages({ messages: message }) a 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"/> </> ) }