6/6 TIL

📖 진행한 공부 📖

• 전역 상태 관리

기능적인 부분은 다 완성했기에 이제 props drilling으로 props를 내려줬던 걸, 전역 상태 관리로 관리해주려 한다.

일단 그 전에 git switch dev를 했는데 이런 오류가 떴다

구글링을 해보니 이럴 땐 아래와 같이 명령어를 입력해주면 된다고 한다.

git stash && git switch dev && git stash pop

git stash란?

현재까지 작업한 내용을 커밋하지 않고 별도의 임시 저장소에 저장하는 명령

작업중인 파일들을 숨겨둘 수 있음

git stash : 작업 내용을 스택에 넣어둠
git checkout main : 원래 하려던 작업 (checkout or pull)
git stash pop : 스택에 넣어둔 변경 사항을 적용하고, 스택에서 제거

이렇게 하니 무사히 dev 브랜치로 switch가 정상적으로 됐다.

그리고 아직 redux toolkit을 install 받지 않았기에 터미널에
yarn add @reduxjs/toolkit react-redux 명령어를 입력해줬다.

그 후 src/store/store.js 파일을 만들어 준 후
기본 셋업을 해줬다.

slice들을 모아둘 slices 폴더에 회원가입, 로그인 관련 상태와 액션을 관리할 authSlice.js를 생성해줬다

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

const initialState = {
    user: null,
    isLoading: false,
    error: false,
}

const authSlice = createSlice({
    name: 'userAuth',
    initialState,
    reducers: {
        signInStart(state) {
            state.isLoading = true;
            state.error = false;
        },
        signInComplete(state, action) {
            state.isLoading = false;
            state.user = action.payload;
        },
        signInFail(state, action) {
            state.isLoading = false;
            state.error = action.payload;
        },
        signUpStart(state) {
            state.isLoading = true;
            state.error = false;
        },
        signUpComplete(state, action) {
            state.isLoading = false;
            state.user = action.payload;
        },
        signUpFail(state, action) {
            state.isLoading = false;
            state.error = action.payload;
        },
        signOut(state) {
            state.user = null;
        }
    }
})

export const {
    signInStart,
    signInComplete,
    signInFail,
    signUpStart,
    signUpComplete,
    signUpFail,
    signOut,
} = authSlice.actions;

export default authSlice.reducer;

여기까진 뭐 대충 알겠는데... 이걸 어떤 식으로 잘 써야 할지 감이 잘 안 잡히긴 한다