[Pokemon PJ_Day 4] RTK (2) - 사용하기

이전 글에서 RTK의 정의와 세팅하는 방법을 정리했다.

https://coco910.tistory.com/79

[Pokemon PJ_Day 4] RTK (1) - setting

이번 글에서는 사용하는 방법!

 

---

 

RTK use

 

📍Redux 2가지 핵심 개념 : useSelector, useDispatch

• useSelector : 현재 state의 값을 조회
• useDispatch : state의 값을 추가, 삭제, 수정

 

📍최종 목표:

[dispatch에 action 객체를 담아서 reducer를 통해 store에 변경된 값 전달하기]

 

 

📍사용 흐름

1. 초기값 설정
2. createSlice 정의
3. reducer 정의
   3-1. reducer 구성
4. action 객체를 실제 사용하는 곳에 적용
   4-1. dispatch를 사용할 수 있도록 정의
   4-2. action이 일어나는 버튼에 onClick 수정
5. useSelector로 현재 state 값 조회

 

1. 초기값 설정

우선 slice에 정의한 초기값은 이전에 작성한 useState의 초기값과 동일하다.

나는 [ ] 빈 배열로 지정하여 들어오는 값을 객체로 담아주고 있었다.

const initialState = [];

 

2. createSlice 정의

slice는 name과 initialState, reducer를 갖고 있다.

그 중 reducer는 어떤 액션을 어떻게 작동할 지 정의해 두는 함수이다.

const monSlice = createSlice({
  name: "setMyPokemon",
  initialState,
  reducers:{},
});

 

 

3. reducer 정의

리듀서는 state와 action을 인자로 가지며 state를 어떻게 변동시킬지 함수로 표현한다.

reducers: {
	addPokemon: () => {},
    deletePokemon: () => {},
};

 

   3-1. reducer 구성

보통 state 객체 내부 요소의 값을 새로운 값(action.payload)으로 변경한다.

하지만, 나는 state가 [ ]이기 때문에 배열 안에 1️⃣새로운 값을 추가하거나 2️⃣새로운 배열로 재정의 해야한다.

 

1️⃣새로운 값을 추가(선택)

• immer에서 메서드를 이용한 state 변경은 허용한다.

state.push(action.payload);

 

2️⃣새로운 배열로 재정의

• 재정의하여 state의 주소값 변경(setState와 같은 역할)

return [...state, action.payload];

 

[최종 reducer]

reducers: {
    addPokemon: (state, action) => {
      state.push(action.payload);
    },
    deletePokemon: (state, action) => {
      state.pop(action.payload);
    },
  },

 

 

4. action 객체를 실제 사용하는 곳에 적용하기

   4-1. PokemonCard.jsx 로직 상단에 dispatch를 사용할 수 있도록 정의(import 필수)

 const dispatch = useDispatch();

 

   4-2. action이 일어나는 버튼에 onClick 수정

• () => {} : dispatch() (=실행 값)이 아닌 함수로 실행
• addPokemon() : 사용하는 reducer
• data : payload 값 (여기서는 포켓몬 하나의 정보(객체)

 <AddBtn onClick={() => {dispatch(addPokemon(data))}}>추가</AddBtn>

 

삭제 로직도 마찬가지로 진행하였다.

 

5. useSelector로 현재 state 값 조회

다 구성한 줄 알았는데 dashboard에서 mapping 하는 배열이 정의되지 않았다는 오류가 떴다.

그 배열은 myMon이라는 이름으로 state값이다.

 

현재 state 값을 조회하는 useSelector를 사용하여 오류를 해결했다.(로직은 최하단에)

 

이로써 RTK로 리팩토링도 성공!

 

 

 

📌최종 로직

 

[Store]

import { configureStore } from "@reduxjs/toolkit";
import monSliceReducer from "../slices/setMyPokemonSlice";

export const store = configureStore({
  reducer: {
    setMyPokemon: monSliceReducer,   👉🏻리듀서의 name: 변수(default로 export했기 때문에 어떤 변수든 괜찮다.)
  },
});

 

[Slice]

import { createSlice } from "@reduxjs/toolkit";

const initialState = [];

const monSlice = createSlice({
  name: "setMyPokemon",
  initialState,
  reducers: {
   
    addPokemon: (state, action) => {
      state.push(action.payload); 
    },
    deletePokemon: (state, action) => {
      state.pop(action.payload);
    },
  },
});

// action creater
export const { addPokemon, deletePokemon } = monSlice.actions;
// reducer
export default monSlice.reducer;

 

[Card] : 필요한 부분만 발췌

const PokemonCard = ({ isAdd, data }) => {

  const dispatch = useDispatch();
  const navigate = useNavigate();

  return (
    <MonCard
      key={data.id}
      onClick={(e) => {
        {
          navigate(`/detail?id=${data.id}`);
        }
      }}
    >
      <MonImg src={data.img_url} />
      <BottomWrap>
        <MonName>{data.korean_name}</MonName>
        <p>No.{data.id}</p>
      </BottomWrap>
      {isAdd === true ? (
        <AddBtn
          className="add-card-btn"
          onClick={() => {
            dispatch(addPokemon(data));
          }}
        >
          추가
        </AddBtn>
      ) : (
        <DeleteBtn
          className="remove-card-btn"
          onClick={() => {
            dispatch(deletePokemon(data));
          }}
        >
          삭제
        </DeleteBtn>
      )}
    </MonCard>
  );
};

export default PokemonCard;

 

[Dashboard] : 필요한 부분만 발췌

const Dashboard = () => {
  const myMon = useSelector((a) => {   👉🏻콜백함수를 인자로 가짐, 콘솔에 찍어보면 store가 가진 리듀서 형태 그대로 나온다.
    return a.setMyPokemon;   👉🏻 그 중 필요한 값을 가져오기
  });