Question

我在套接字的本机反应中有一个上下文/提供者。通常看起来像这样：

const SocketProvider = (props) => {
    // socket settings
    // ...
    useEffect(() => {
        if (socket) {
             socket.onmessage = (data) => {
                 dispatch(saveMessage(data));
             }
        }
     }, [socket]);

     return (
         <SocketContext.Provider value={{ socket }}>
            {props.children}
         </SocketContext.Provider>
     )
};

每当收到新邮件时，它就会保存在redux存储中。此上下文环绕所有其他组件，因此我不必在特定屏幕上接收消息，并且所有其他组件都可以使用socket发送消息。

我有一个名为directmessages.js的屏幕，该屏幕从redux存储中获取消息，并且还具有textinput字段来发送消息。看起来像这样（简化）：

// conversation ID 
const cId = route.params.cId;

 // fetch the correct conversation from the redux store
 const conversation = useSelector(state => {
    return state.dm.conversations.find(e => e.cId === cId)
 }

 const [messages, setMessages] = useState([]);

  useEffect(() => {
    if (conversation) {
        setMessages(conversation.messages || []);
    }
   }, [conversation]);

我在此屏幕上列出了所有消息。

当我发送一条消息时，此消息以redux状态（dispatch（storeMessage（data）））存储在directmessages.js屏幕本身上，它不会传递套接字上下文（因为它发送未收到）。此商店更新会触发重新渲染，以在单位列表中显示新消息。

问题是：当我接收新邮件时，清单未重新呈现。当我开始在textinput字段中输入一些文本时，它会再次执行此操作，因为那会触发每个按键的重新渲染。

每次redux存储区的内容更改时，如何强制重新渲染屏幕/组件？

在redux存储更改时触发重新渲染

0 个答案: