[TIL]231130_(다시는 없어야 할)Redux 에러

👩🏻‍💻 Today Learn

• 알고리즘 스터디
• 심화주차 개인과제

🤦🏻‍♀️ 고민한 부분

Redux Toolkit으로 리팩터링 중 발생한 문제

첫번째 문제

기존에 React의 props-drilling으로 제작한 팬레터 과제를 리팩터링 하던 중 fake data의 카드리스트가 불러와지지 않는 현상이 발생했다.

Reduk-Toolkit을 확실하게 숙지한 상태가 아니라 이것저것 찾아보면서 진행하다보니 무지함에서 발생한 실수였다고 생각한다.

// configStore.js

const store = configureStore({
  reducer: {
    fanletters,
    characters,
    auth,
  },
});

// modules의 fanLetters.js
const fanLetterSlice = createSlice({
  name: "fanletters",
  initialState,
  reducer: {
    // 팬레터 추가
    addLetter: (state, action) => {
      console.log(action.payload);
      return [action.payload, ...state];
    },
    // 팬레터 삭제
    deleteLetter: (state, action) => {
      return state.filter((letter) => letter.id !== action.payload);
    },
    // 팬레터 수정
    editLetter: (state, action) => {
      const { editText } = action.payload;
      return state.map((letter) => {
        if (letter.id === action.payload) {
          return { ...letter, content: editText };
        } else {
          return letter;
        }
      });
    },
  },
});

export default fanLetterSlice.reducer;
export const { addLetter, deleteLetter, editLetter } = fanLetterSlice.actions;

// 카드리스트를 불러오는 컴포넌트
  const activeCharacter = useSelector((state) => state.character);
  const letters = useSelector((state) => state.fanletter);

무엇이 문제인지 지금은 보이지만 해결전에는 정말 까막눈 그 자체였다..
위에 코드에서 지금은 modules부분은 볼 필요도없다!(다음에 이어질 문제에서 언급할 예정)
store에서 전달한 reducer와 사용하려는 컴포넌트의 useSelector부분을 보면 다른것을 알 수 있다.

두번째 문제

첫번째 문제를 해결해서 카드리스트를 불러오는 것은 정상적으로 돌아왔지만 추가, 수정, 삭제 모두 error가 발생했다. 그 말은 전역상태를 관리중인 modules부분이 문제라거나.. 문제라거나.....그렇다거나....

혹시 이 글을 읽는 분이 계신다면 위의 modules부분을 봤을때 바로 발견했을수도 있을 것이다.
바로 createSlice안에 있는 reducers를 reducer로 적은것이 문제가 되었던 것이다.

이 두가지 문제를 해결했더니 다시 정상적으로 작동이 되었다.

✍🏻 회고

사실 오늘 저지른(?) 발생한(?)문제는 휴먼에러처럼 보이겠지만 지금 시점의 나에게는 그렇게 느껴지지 않았다. Redux Toolkit을 처음 사용해보았고 이해도가 낮았고 확실하게 공부하지 않았기 때문에 발생한 문제라고 생각한다. 대신 그만큼 이부분은 더 확실하게 각인되었기 때문에 같은 실수를 반복할 일은 절대 만들지 않을 것이다!

정신차리자