[질문] 불필요한 Window.reload 제거 방법

[heejin0421]

Description

Detail page에서 유저가 참여하기 버튼과 공구 나가기 버튼을 했을 때
기존에는 일괄적으로 Window.reload로 새로고침을 하여 내용이 바뀌게 처리했습니다. 이렇게 처리가 된다면 사용자가 느끼기에 불필요하게 화면이 새로고침이 될 것으로 생각하여 해결법을 찾아 수정을 하려고 합니다. 이러한 문제에 관하여 해결하신 방법이 있으신 분은 내용 공유를 해주시면 감사할 거 같습니다.

[JMKiim]

상세페이지에서 참여중인 유저 목록에 변화가 없어서 그러시는걸까요? 만약 그렇다면

임시 배열에 챗룸멤버스를 담은 후 현재 로그인한 유저 정보를 담거나 빼준 후 글 수정 리듀서로 반영 시켜주면 될겁니다.

const tempArr = [...post.charRoomMembers]; tempArr.push( { ~~ 유저정보 담은 객체 ~~ } ); dispatch(UPDATE_USER(tempArr));

이런식으로요

[heejin0421]

@JMKiim 재명님 의견에 따라 이런식으로 코드를 작성하니 굳이 새로고침을 하지않고도 바로바로 페이지에 유저가 내용을 확인할수있게 변경할수있었습니다 감사합니다!

  // 참여 핸들러
  const onEnterHandler = () => {
    if (refreshToken) {
      dispatch(__enterChannel(id));
      dispatch(__increaseParticipantThunk(id));
      dispatch(UPDATE_USER({ ...user, onGoing: post.postId }));

      const tempArr = [...post.chatRoomMembers];
      tempArr.push({ member: user });
      dispatch(
        UPDATE_POST({
          ...post,
          chatRoomMembers: tempArr,
        })
      );
    } else {
      setIsDP(true);
    }

    // window.location.reload();
  };

  // 퇴장 핸들러
  const onExitHandler = () => {
    dispatch(__decreaseParticipantThunk(id));

    dispatch(UPDATE_USER({ ...user, onGoing: null }));

    const tempArr = [...post.chatRoomMembers];

    const target = tempArr.findIndex((item) => {
      return item.member.id === user.id;
    });

    tempArr.splice(target, 1);

    dispatch(
      UPDATE_POST({
        ...post,
        chatRoomMembers: tempArr,
      })
    );
    dispatch(__exitChannel(id));
    setIsExitOpen(false);
  };