[Redux Toolkit] todos-app에서의 Slice 231023

~106일차~

todos 앱을 배우며 모르는 부분이 있어 질의응답으로 이해한 부분을 기재한다.

//타입과 initialState
interface NoteState {
  mainNotes: Note[];
  archiveNotes: Note[];
  trashNotes: Note[];
  editNote: null | Note;
}
const initialState: NoteState = {
  mainNotes: [...notes],
  archiveNotes: [],
  trashNotes: [],
  editNote: null,
};
enum noteType {
  archiveNotes = "archiveNotes",
  trashNotes = "trashNotes",
  mainNotes = "mainNotes",
}


// Slice
const noteListSlice = createSlice({
  name: "noteList",
  initialState,
  reducers: {
    //중략
    
     readNote: (state, { payload }) => {
       //1. payload
      const { type, id } = payload;

      const setRead = (notes: noteType) => {
        //2. state
        state[notes] = state[notes].map((note: Note) =>
          note.id === id ? { ...note, isRead: !note.isRead } : note
        );
      };
		  // noteType은 enum이다
      if (type === "archive") {
        setRead(noteType.archiveNotes); //"archiveNotes"
      } else if (type === "trash") {
        setRead(noteType.trashNotes); //"trashNotes"
      } else {
        setRead(noteType.mainNotes); //"mainNotes"
      }
    },
  },
});

// 사용하는 곳
<DeleteBox
   onClick={() => dispatch(readNote({ type, id: note.id }))}
   className="readNote__close-btn"
        >

1. payload

type, id를 객체로 받으며 payload에 할당

2. state

notes가 버라이어티한 string값이기 때문에
state.mainNotes = state.mainNotes.map 처럼
state.notes로 사용할 수 없다.

예를 들어 설명한다.
notes = “archiveNotes” 이며,
state.notes - state.“archiveNotes” 형태는 되지 않는다.
state[notes] - state[“archiveNotes”] 로 작성해야,
결국 state.archiveNotes과 같아진다.

간단 정리

setRead(noteType.archiveNotes)
=> setRead(“archiveNotes”)

state[notes] = state[“archiveNotes”] = state.archiveNotes