[React] 리덕스 툴킷으로 slice 파일 생성하기

☘️myInfoSlice.js

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

const myInfoSlice = createSlice({
  name: "myInfo",

  initialState: {
    email: "",
    nickName: "",
    gender: "",
    birth: "",
    src: "",
  },

  reducers: {
    setInfo(state, action) {
      const { email, nickName, gender, birthDay, fileId } = action.payload;
      const birth = birthDay.substring(0, 4) + "." + birthDay.substring(4, 6) + "." + birthDay.substring(6, 8);
      const src = fileId === "0" ? "/images/default_profile.png" : `${axios.defaults.baseURL}/common/attach/showImg/${fileId}`;
      state.email = email;
      state.nickName = nickName;
      state.gender = gender === "M" ? "남성" : "여성";
      state.birth = birth;
      state.src = src;
    },
  },
});

export const { setInfo } = myInfoSlice.actions;
export const selectMyInfo = (rootState) => rootState.myInfoReducer;
export default myInfoSlice.reducer;

---

☘️store.js

//리듀서들을 묶은 rootReducer 얻기
const rootReducer = combineReducers({
  //속성명은 상태 선택 함수에서 rootState로 접근할 때 사용됨
  authReducer: authReducer,
  myInfoReducer: myInfoReducer,
});

---

☘️값 설정 및 사용

// 값 설정
const dispatch = useDispatch();
dispatch(setInfo(res.data));

// 값 가져오기
const myInfo = useSelector(selectMyInfo);