전역상태 관리

• store/Store.js

  import { configureStore } from "@reduxjs/toolkit";
  import LoginState from "./LoginSlice";
  import ModalState from "./ModalSlice";
  import { WishState } from "./WishList";
  
  export const store = configureStore({
    reducer: {
      Login: LoginState.reducer,
      Modal: ModalState.reducer,
      Wishlist: WishState.reducer,
    },
  });
  
  export default store;

• store/LoginSlice.js

  import { createSlice } from "@reduxjs/toolkit";
  import {
      accessToken,
      refreshToken,
      memberId,
      kakaoAccessToken,
  } from "../utils/localStorage";
  
  const initialState = {
      isLogin: !!accessToken,
      accessToken,
      refreshToken,
      memberId,
      kakaoAccessToken,
  };
  
  const LoginState = createSlice({
      name: "loginstate",
      initialState,
      reducers: {
          login: (state) => {
              state.isLogin = true;
          },
          logout: (state) => {
              state.isLogin = false;
          },
      },
  });
  
  export const { login, logout } = LoginState.actions;
  
  export default LoginState;

• store/ModalSlice.js

  import { createSlice } from "@reduxjs/toolkit";
  
  const initialState = {
      isModal: false,
  };
  const ModalState = createSlice({
      name: "modalstate",
      initialState,
      reducers: {
          modalOpen: (state) => {
              state.isModal = true;
          },
          modalClose: (state) => {
              state.isModal = false;
          },
      },
  });
  
  export const { modalClose, modalOpen } = ModalState.actions;
  
  export default ModalState;

• store/WishList.js

  import axios from "axios";
  import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
  import { accessToken } from "../utils/localStorage";
  
  export const getWishList = createAsyncThunk("GET_WISH", async () => {
    const wishList = await ( //await안에
      await axios.get(`/member/wishlists`, { //await 넣어서
        headers: {
          Authorization: accessToken,
        },
      })
    ).data; //.data로 받아오기
    return wishList.data;
  });
  
  const initialState = [];
  
  export const WishState = createSlice({
    name: "wishstate",
    initialState,
    reducers: {},
    extraReducers: {
      [getWishList.fulfilled]: (state, { payload }) => [...payload],
    },
  });

---

⭐ useSelector ⇒ 상태값 조회

const isLogin = useSelector((state) => state.Login.isLogin);
const wish = useSelector((state) => state.Wishlist);

⭐ useDispatch ⇒ action객체 실행

const dispatch = useDispatch();
useEffect(() => {
    dispatch(getWishList());
  }, []);

//or
dispatch(modalOpen();