리액트에서 상태관리는 항상 새로고침이나 재랜더링시 저 멀리 날아가버린다. 우리에겐 두가지 선택지가 있다.

1.local storage를 써서 useEffect훅을 이용해 state가 텅 비어있다면 localstrage.getItem을 이용하여 key값을 매칭해 value를 불러오는것(물론 이렇게 하면 처음 state변경시 setitem으로 저장도 해줘야한다 끼얏호우~~)

2.redux-persist를 활용하여 날먹을 하는 방법

지금까지 1번으로 해 왔는데 상당히 매우매우 귀찮다. 물론 2번 방법을 몰랐던건 아니다. 근데 왜 1번으로 했는가? 난 영어를 싫어했고, 공식문서를 읽기 싫었기 때문이다. 하지만 악깡버 하다 결국 오늘 결심했다.
"써야징"

1.설치한다

NPM

npm install @reduxjs/toolkit

이렇게 설치하랜다 하자.

2.폴더 만들자

src하위 폴더로 redux를 만들고 reducer를 처리할 폴더 하나, configureStore 를 이용해 모든 reducer를 모아 export할 index or store 파일 하나.

왜 굳이 모아서 export하냐고? 간지나기 때문이다.

3.만들었으면 정의 하자

src/redux/reducer

import { combineReducers, configureStore, createSlice } from "@reduxjs/toolkit";
// usestate 같은 역할
export const userReducer = createSlice({
name: "teacherUid",
initialState: { uid: "고유 번호" },
reducers: {
setTeacherUid(state, uid) {
state.uid = uid.payload;
},
increase(state, a) {
state.age += a.payload;
},
},
});
export let { setTeacherUid } = userReducer.actions;
export default userReducer.reducer;

prettier포매터로 들여쓰기를 했는데도 이렇다 찰떡같이 이해하자.
너가 원하는 이름으로 reducer이름을 짓는다. createSlice로 만들자
initialState->초기 state상태
reducers->이 state를 변경해주는 함수를 모아놓은 object
첫 번째 파라미터는 현재 state이다. 프로토 타입 다 이용가능 ㅇㅇ
두번 째 부터는 너가원하는 파라미터를 정의하자. 근데 왜 함수 내에서 payload를 썼냐! 이거 라이브러리 만든사람이 이렇게 하란다.
함수를 만들었으면 뭘 해야 하나? export 로 내보내자.
비선언형으로 setTeacherUid를 낼름 내보내자 우항은 당연히 reducer를 모아놓은 오브잭트다. 근데 왜 userReducer.reducer가 아니라 userReducer.actions냐고? 이거 라이브러리 만든사람이 이렇게 하란다. 아이러니 하게 store에서 이용 할 reducer들은 userReducer.reducer로 내보낸다.

src/redux/index.js

import { configureStore } from '@reduxjs/toolkit'
import  userReducer from '../slice/userReducer.js'
import studentReducer  from "../slice/studentReducer.js";

import {
    persistStore,
    persistReducer,
    FLUSH,
    REHYDRATE,
    PAUSE,
    PERSIST,
    PURGE,
    REGISTER,
  } from 'redux-persist'
  import storage from 'redux-persist/lib/storage'


  const persistConfig = {
    key: 'root',
    version: 1,
    storage,
  }

  const persistedReducer = persistReducer(persistConfig, userReducer);
  const persistStudentReducer=persistReducer(persistConfig,studentReducer);

  export const store = configureStore({
    reducer: {teacherUid:persistedReducer,
        studentInformation:persistStudentReducer},
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        serializableCheck: {
          ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
        },
      }),
  })
  

히익!이게 머야! 걱정하지 말자 우린 실리콘밸리에서 일하는 사람도, 네카라쿠배당토에서 개발하는 사람이 아니다. 대충 봐서 변수 옆에 있는 함수(우항)은 라이브러리 만드는 사람이 정의한거고, 좌항은 우리 맛깔나는대로 변수이름을 바꿀 수 있는 것이다.

const persistedReducer = persistReducer(persistConfig, userReducer);
const persistStudentReducer=persistReducer(persistConfig,studentReducer);

알아 볼 수 있는 변수이름에 그에 해당하는 (너가 만든)reducer를 넣자, 어떻게? persistReducer의 두번 째 파라미터에. 그럼 첫 번째 파라미터는?
타입과 whitelist같은 조건을(config)를 저장하는 공간이다. 왜 설정을 하는가?모른다 이거 라이브러리 만든사람이 이렇게 하란다.

export const store = configureStore({
reducer: {teacherUid:persistedReducer,
studentInformation:persistStudentReducer},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
},
}),
})

눈에 익은 변수를 보자

  reducer: {teacherUid:persistedReducer,
studentInformation:persistStudentReducer}

보인다... configureStore에서 여러분들이 config와 함께 새롭게 정의한 reducer를 이 reducer에 다시 넣도록 하자 . object name은 실제로 꺼내 쓸 때 필요한 이름이므로 잘 적자.
이제 사용할 준비가 끝났다. 나머지 변수들은? 본인이 iq100이상이거나 hello world를 띄울 수 있는 초고수라면 공식문서를 참고해서 바꿔보자 본인은 미들웨어에서 ㅈㅈ치고 에펙하러감 ㅋ

4.이제 redux toolkit처럼 쓰면 됨

  let reduxData = useSelector((state) => { return state.studentInformation });

let dispatch=useDispatch();

 dispatch(setStudentInformation(findList));

끗