redux toolkit으로 댓글 상태 관리하기

 

reducers: {
    setReview: (state, action) => {
      //페이로드: 리뷰 데이터 전체
      return { ...state, reviews: action.payload };
    },
    addReview: (state, action) => {
      //페이로드: 리뷰 데이터 객체 하나
      return { ...state, reviews: [...state.reviews, action.payload] };
    },
    modifyReview: (state, action) => {
      //페이로드: 리뷰아이디, 수정된 리뷰 내용, 평점
      const targetReviewId = action.payload.reviewId;
      const modifiedContent = action.payload.modifiedContent;
      const modifiedGrade = action.payload.modifiedGrade;
// 전체를 돌면서 
      const modifiedReviews = state.reviews.map((item) => {
// 수정할 리뷰를 찾음
        if (item.id === targetReviewId) {
// 그 수정할 리뷰= item을 펼치고 수정된 내용을 적용함
          return { ...item, content: modifiedContent, grade: modifiedGrade };
// 나머지는 그대로 return
        } else return item;
      });
// review를 아예 수정된 리뷰를 포함하고 있는 새 리뷰 배열로 교체
      return { ...state, reviews: modifiedReviews };
    }
  }

 

각 리듀서에 어떤 페이로드가 들어올지 주석으로 작성해놓고 리듀서를 작성하면 편하다.