Websocket 事件在 React 应用程序中接收旧的 redux 状态

Question

我正在使用 Reactjs 和 Redux 构建一个聊天应用程序。我有 2 个组件，分别称为 ChatHeads 和 ChatBox，它们同时并排安装。

在 ChatHeads 组件中，可以选择 User（您要与之聊天的人），并且该选择以 chatInfo 的形式存储在 redux 存储中。

ChatHeads 组件：

function ChatHeads(props) {
  const {
    dispatch,
    userInfo,
    userId
  } = props;
  const [chatHeads, setChatHeads] = useState([]);

  const handleChatHeadSelect = (chatHead, newChat = false) => {
    dispatch(
      chatActions.selectChat({
        isNewChat: newChat,
        chatId: chatHead.chat._id,
        chatUser: chatHead.user
      })
    );
  };

  const loadChatHeads = async () => {
    const response = await services.getRecentChats(userId, userInfo);
    setChatHeads(response.chats);
  };

  useEffect(() => loadChatHeads(), [userInfo]);

  return (
    //   LOOPING THOUGH ChatHeads AND RENDERING EACH ITEM
    //   ON SELECT OF AN ITEM, handleChatHeadSelect WILL BE CALLED
  );
}

export default connect(
  (state) => {
    return {
      userInfo: state.userInfo,
      userId: (state.userInfo && state.userInfo.user && state.userInfo.user._id) || null,
      selectedChat: (state.chatInfo && state.chatInfo.chat && state.chatInfo.chat._id) || null
    };
  },
  null,
)(ChatHeads);

聊天操作和缩减程序：

const initialState = {
  isNewChat: false,
  chatId: '',
  chatUser: {},
};

const chatReducer = (state = initialState, action) => {
  let newState;
  switch (action.type) {
    case actions.CHAT_SELECT:
      newState = { ...action.payload };
      break;

    default:
      newState = state;
      break;
  }
  return newState;
};

export const selectChat = (payload) => ({
  type: actions.CHAT_SELECT,
  payload,
});

在 ChatBox 组件中，我正在建立与服务器的套接字连接，并基于来自全局存储和 ws 事件的chatInfo 对象，执行一些操作。

聊天框组件：

let socket;

function ChatBox(props) {
  const { chatInfo } = props;

  const onWSMessageEvent = (event) => {
    console.log('onWSMessageEvent => chatInfo', chatInfo);
    // handling event
  };

  useEffect(() => {
    socket = services.establishSocketConnection(userId);

    socket.addEventListener('message', onWSMessageEvent);

    return () => {
      socket.close();
    };
  }, []);

  return (
    //   IF selectedChatId
    //     THEN RENDER CHAT
    //   ELSE
    //     BLANK SCREEN
  );
}

export default connect((state) => {
  return {
    chatInfo: state.chatInfo
  };
}, null)(ChatBox);

步骤：

1. 两个组件都呈现后，我在 ChatHeads 组件中选择一个用户。
2. 使用 Redux DevTools，我能够观察到 chatInfo 对象已正确填充。

chatInfo: {
    isNewChat: false,
    chatId: '603326f141ee33ee7cac02f4',
    chatUser: {
        _id: '602a9e589abf272613f36925',
        email: 'user2@mail.com',
        firstName: 'user',
        lastName: '2',
        createdOn: '2021-02-15T16:16:24.100Z',
        updatedOn: '2021-02-15T16:16:24.100Z'
    }
}

1. 现在，每当 ChatBox 组件中触发 'message' 事件时，我的期望是 chatInfo 属性应该具有最新值。但是，我总是得到 initialState 而不是更新的。

chatInfo: {
    isNewChat: false,
    chatId: '',
    chatUser: {}
}

我在这里缺少什么？请建议...

Answer 1

这种行为的原因是当你声明你的回调时

const { chatInfo } = props;
const onWSMessageEvent = (event) => {
  console.log('onWSMessageEvent => chatInfo', chatInfo);
  // handling event
};

它记得chatInfo 在声明的这一刻是正确的（这是初始渲染）。值在 store 内和组件渲染范围内更新与回调无关，重要的是回调范围以及声明回调时chatInfo 所指的内容。

如果您想创建一个始终可以读取最新状态/道具的回调，您可以将chatInfo 保留在可变引用中。

const { chatInfo } = props;
// 1. create the ref, set the initial value
const chatInfoRef = useRef(chatInfo);
// 2. update the current ref value when your prop is updated
useEffect(() => chatInfoRef.current = chatInfo, [chatInfo]);
// 3. define your callback that can now access the current prop value
const onWSMessageEvent = (event) => {
  console.log('onWSMessageEvent => chatInfo', chatInfoRef.current);
};

你可以查看this codesandbox，看看使用ref和直接使用prop的区别。

您可以咨询docs about stale props和useRef docs

---

从广义上讲，问题在于您正试图在一个范围更窄的组件内管理全局订阅（套接字连接）。

没有useRef 的另一种解决方案看起来像

useEffect(() => {
    socket = services.establishSocketConnection(userId);

    socket.addEventListener('message', (message) => handleMessage(message, chatInfo));

    return () => {
      socket.close();
    };
  }, [chatInfo]);

在这种情况下，消息事件处理程序通过参数传递必要的信息，并且每次我们得到一个新的chatInfo 时，useEffect 挂钩都会重新运行。

但是，这可能与您的目标不符，除非您想为每个聊天打开一个单独的套接字，并在每次切换到不同的聊天时关闭该套接字。

因此，“适当的”解决方案需要在您的项目中向上移动套接字交互。一个提示是您正在使用 userId 打开套接字，这意味着它应该在您知道您的 userId 后运行，而不是在用户选择聊天时运行。

要向上移动交互，您可以将传入的消息存储在 redux 存储中，并通过 props 将消息传递给 ChatBox 组件。或者您可以在ChatHeads 组件中创建连接到套接字并将消息传递给ChatBox。类似的东西

function ChatHeads(props) {
  const {
    dispatch,
    userInfo,
    userId
  } = props;
  const [chatHeads, setChatHeads] = useState([]);

  const loadChatHeads = async () => {
    const response = await services.getRecentChats(userId, userInfo);
    setChatHeads(response.chats);
  };

  useEffect(() => loadChatHeads(), [userInfo]);

  const [messages, setMessages] = useState([]);
  useEffect(() => {
    socket = services.establishSocketConnection(userId);
    socket.addEventListener('message', (msg) => setMessages(messages.concat(msg)));
  }, [userId]);
    return () => socket.close();
}

   return (
   // render your current chat and pass the messages as props
   )

或者您可以创建一个 reducer 并发送一个 chatActions.newMessage 事件，然后使用 redux 将消息发送到当前聊天。

主要的一点是，如果你需要chatInfo来打开socket，那么每次chatInfo改变时，你可能需要打开一个新的socket，所以将依赖添加到useEffect钩子是有意义的.如果它只依赖于userId，则将其移至您获得userId 的位置并连接到那里的套接字。