개인과제 - 포켓몬도감 만들기 ④

■  Redux Tool Kit 으로 리팩토링하기

 

 ⚬ Redux Toolkit 과 React Redux 패키지 설치

yarn add @reduxjs/toolkit react-redux

 

 ⚬ Redux store 생성

// store.js
import { configureStore } from "@reduxjs/toolkit";
import pokemonReducer from "../modules/pokemonSlice";

export default configureStore({
  reducer: {
    pokemon: pokemonReducer,
  },
});

 

 ⚬ main.jsx에서  Provider로 App 컴포넌트를 감싸 store를 props로 넘겨주기

// main.jsx
// Provider, store import 해주기
import { Provider } from "react-redux";
import store from "./redux/config/store.js";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <Provider store={store}> // App 컴포넌트 감싸주기
      <App />
    </Provider>
  </StrictMode>
);

 

 ⚬ pokemonSlice 생성하기

// pokemonSlice.js
import { createSlice } from "@reduxjs/toolkit";

const initialState = [];

export const pokemonSlice = createSlice({
  name: "pokemon",
  initialState,
  reducers: {
    addPokemon: (state, action) => {
        
    },
    removePokemon: (state, action) => {},
  },
});

export const { addPokemon, removePokemon } = pokemonSlice.actions;
export default pokemonSlice.reducer;

 

 ⚬ 컴포넌트에서 Redux State 와 Actions 사용하기

 

 

■  느낀점

혼자 해보다가 벽에 겁나 부딪힌 기분

addPokemon 로직까지만 리덕스화 시키는걸 목표로 해야겠다.

중간중간 꼭 콘솔 찍어서 확인하는거 잊지말자

 

 

 

참고

https://react-redux.js.org/tutorials/quick-start