2023.12.18

setNewLabels: (state, action) => {
  const newLabel = {
    name: action.payload,
  };
  labelsOnModal.labels.push(newLabel);
}

⇒**setNewLabels** 리듀서에서 **labelsOnModal.labels.push(newLabel)**를 직접 변경하는 것은 불변성을 위배하고 Redux의 예측 불가능한 동작을 유발할 수 있습니다. 대신, 새로운 배열을 생성하여 업데이트해야 합니다. 그래서 밑에처럼 해야함.

setNewLabels: (state, action: PayloadAction<string>) => {
  const newLabel: ModalLabel = {
    name: action.payload,
  };
  state.labels = [...state.labels, newLabel];
}

const modalLabels = useSelector((state: RootState) => state.modal.labels);

⇒ state.modal.labels 에서 labels를 계속 처리하지 않았음

const initialState: ModalState = {
  isModalOpen: false,
  labels: [], //원래 안 넣었었음.
};

const modalSlice = createSlice({
  name: "modal",
  initialState,
  reducers: {
		//reducers 함수들
    },
  },
});

⇒ RootState를 통해 modalSlice로 가서, initialState에 있는 값을 가져오는건데, 위 initialState 변수 오브젝트에 labels를 추가 안시켜서 안 먹혔었음.