[포켓몬 수집 사이트]3. redux

너무 바쁘게 코딩하다보늬... context한건 블로그작성을 패스해버렸다...

먼저 redux로 작성후 @reduxjs/toolkit으로 리팩토링해봤다!

정말정말 redux가 어려웠다...ㅠㅠㅠ

 

1. redux

store에 createStore생성후 export한후에, 최상위 루트에서 Provider store연결!

//store.js
import { createStore } from "redux";

const store = createStore(pokemonReducer);
export default store;

//main.jsx
import { Provider } from "react-redux";
import store from "./reducers/store.js";

...

<Provider store={store}>
...
</Provider>

context로 전역상태관리했던 것들을 이제 redux로 넣어주고, 사용하는 컴포넌트에서 dispatch로 받아오기!

//store.js

...
const pokemonReducer = (state = initialState, action) => {
  switch (action.type) {
    case "add":
      return addPokemon(state, action.data);
    case "remove":
      return removePokemon(state, action.data);
    default:
      return state;
  }
};
...

//PokemonCard.jsx
import { useDispatch } from "react-redux";
...

export default function PokemonCard(){
	...
    const dispatch = useDispatch();
   const handleAddClick = (e) => {
    e.preventDefault();
    dispatch({ type: "add", payload: data });
  };
  ...
}

 

2. @reduxjs/toolkit

store과 slice를 파일분리

//store.js

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

const store = configureStore({
  reducer: {
    selected: pokemonSlice.reducer,
  },
});


export default store;

//PokemonSlice.js
import { createSlice } from "@reduxjs/toolkit";
...
const pokemonSlice = createSlice({
  name: "selected",
  initialState,
  reducers: {
      addItem(state, action) {
        ...
      }
      removeItem(state, action) {
       ...
      }
   }
}

export const pokemonActions = pokemonSlice.actions;
export default pokemonSlice;

action변경

import { useDispatch } from "react-redux";
import { pokemonActions } from "../redux/pokemonSlice";

...

export default function PokemonList() {
	const dispatch = useDispatch();
  const handleAddClick = (e, data) => {
    e.preventDefault();
    dispatch(pokemonActions.addItem(data));
  };
  ...
}

 

확실히 redux toolkit사용하니까 코드도 간결해지고, action도 관리하기 용이하다!