최근 redux toolkit, redux-saga를 사용하여 프로젝트를 진행하던 중 하나의 slice에서 여러 가지 액션이 발생함에 따라서 slice 내에서 로딩을 처리하면 어떤 action의 로딩 상태인지 알 수가 없어졌습니다. 그래서 각 action의 로딩 상태를 관리해주는 loadingSlice를 만들어서 이를 해결해보기로 했습니다.

 

### 😰 기존 slice loading 상태 관리의 문제점

기존의 slice에서 loading 상태를 관리하는 예시를 들기 위해 redux toolkit을 사용하여 회원의 이름과 나이를 가저오는 slice와 saga를 생성했습니다.
 
> userSlice.ts
```ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";

interface InitialState {
 userName: string | null;
 userAge: number | null;
 isLoading: boolean;
}

const initialState: InitialState = {
 userName: null,
 userAge: null,
 isLoading: false,
};

export const userSlice = createSlice({
 name: "user",
 initialState,
 reducers: {
 getUserName: (state) => {
 state.isLoading = true;
 },
 getUserNameSuccess: (state, { payload }: PayloadAction<string>) => {
 state.userName = payload;
 state.isLoading = false;
 },
 getUserNameFailure: (state, { payload }: PayloadAction<string>) => {
 state.userName = payload;
 state.isLoading = false;
 },
 getUserAge: (state) => {
 state.isLoading = true;
 },
 getUserAgeSuccess: (state, { payload }: PayloadAction<number>) => {
 state.userAge = payload;
 state.isLoading = false;
 },
 getUserAgeFailure: (state, { payload }: PayloadAction<number>) => {
 state.userAge = payload;
 state.isLoading = false;
 },
 },
});

export default userSlice;
```
 
> userSaga.ts
```ts
import { call, takeLatest, fork, all, put } from "redux-saga/effects";

import userSlice from "@store/slices/userSlice";

const {
 getUserAge,
 getUserAgeSuccess,
 getUserAgeFailure,
 getUserName,
 getUserNameSuccess,
 getUserNameFailure,
} = userSlice.actions;

function* getUserNameSaga(action: PayloadAction) {
 try {
 const result = "찬영";
 yield put(getUserNameSuccess(result));
 } catch (error) {
 console.log(error);
 yield put(getUserNameFailure());
 }
}

function* getUserAgeSaga(action: PayloadAction) {
 try {
 const result = 25;
 yield put(getUserAgeSuccess(result));
 } catch (error) {
 console.log(error);
 yield put(getUserAgeFailure());
 }
}

function* watchGetUserNameSaga() {
 yield takeLatest(getUserName, getUserNameSaga);
}

function* watchGetUserAgeSaga() {
 yield takeLatest(getUserAge, getUserAgeSaga);
}

export default function* UserSaga() {
 yield all([fork(watchGetUserNameSaga), fork(watchGetUserAgeSaga)]);
}
```
 
유저의 이름과 나이를 요청하는 getUserName, getUeserAge 두개의 액션이 존재하고 액션이 동작하면 isLoading의 상태가 true로 변환됩니다. 이후 saga를 거쳐 성공 여부를 반환하는 Success, Failure 액션이 동작하면 isLoading 상태를 false로 변환합니다.
 
문제는 위의 액션이 동시에 실행된다면 isLoading의 상태가 true로 변환되었을 때 어느 액션이 로딩 중인지 판별할 수 없다는 것입니다.

 
***
 
### loadingSlice 만들어 액션별로 로딩 구분하기

우선 각각의 액션명을 받아 loading 상태를 관리할 수 있는 loadingSlice를 생성합니다.
reducers는 동작의 시작과 끝을 알 수 있도록 startLoading, finishLoading을 만들었습니다.
 
> loadingSlice.ts
```ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";

interface InitialState {
 loading: any
}

const initialState: InitialState = {
 loading: {},
};

export const loadingSlice = createSlice({
 name: "loading",
 initialState,
 reducers: {
 startLoading: (state, { payload: actionType }: PayloadAction<string>) => {
 state.loading[actionType] = true;
 },
 finishLoading: (state, { payload: actionType }: PayloadAction<string>) => {
 state.loading[actionType] = false;
 },
 },
});

export default loadingSlice;
```
 
그리고 기존의 userSaga의 saga의 시작하는 부분에 startLoading reducers를, 종료되는 부분에 finishLoading reducers를 사용합니다.
 
> userSaga.ts
```ts
function* getUserNameSaga(action: PayloadAction) {
 yield put(startLoading(action.type));
 try {
 yield call(wait);
 const result = "찬영";
 yield put(getUserNameSuccess(result));
 } catch (error) {
 console.log(error);
 yield put(getUserNameFailure());
 }
 yield put(finishLoading(action.type));
}

function* getUserAgeSaga(action: PayloadAction) {
 yield put(startLoading(action.type));
 try {
 yield call(wait);
 const result = 25;
 yield put(getUserAgeSuccess(result));
 } catch (error) {
 console.log(error);
 yield put(getUserAgeFailure());
 }
 yield put(finishLoading(action.type));
}
```

 
로딩 상태를 정확하게 분별하기 위해 saga동작에 5초의 딜레이를 주고 확인하였습니다.

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/04901365-3ae5-4358-5e72-4fe5bb730700/public)

각각의 액션마다 로딩 상태가 추가되고 잘 동작하는 것을 확인할 수 있습니다!
 
로딩 상태를 뷰에서 확인하려면 useSelector를 사용하여 로딩 상태를 불러온후 사용한 action의 type을 이용하여 확인이 가능합니다.
 

>액션별 로딩 상태값 불러오기 예시
```ts
 const { loading } = useSelector((state: RootState) => state.loading);
 const getUserNameLoading = loading[userSlice.actions.getUserName.type];
 const getUserAgeLoading = loading[userSlice.actions.getUserAge.type];
```

 
***
 
### 마치며
액션에 따라 로딩 상태가 분리되었으니 로딩 상태에 맞는 자연스러운 로딩 UI / UX 표현이 가능해졌습니다! 또한 saga에서 api 요청 시 결과 및 에러에 관해서도 해당 포스트와 같은 방법으로 처리하면 좋을 것 같다는 생각이 듭니다.

최근 redux toolkit, redux-saga를 사용하여 프로젝트를 진행하던 중 하나의 slice에서 여러 가지 액션이 발생함에 따라서 slice 내에서 로딩을 처리하면 어떤 action의 로딩 상태인지 알 수가 없어졌습니다. 그래서 각 action의 로딩 상태를

redux toolkit, redux-saga 환경에서 action에 따른 로딩 상태 관리