redux에선 액션(Action), 슬라이스(Slice), Thunk가 있다.

액션(Action)

• 액션은 Redux에서 상태 변화의 요청을 나타내는 객체
• 일반적으로 “타입(type)”이라는 필드를 가지며, 상태 변화의 종류를 식별하는 역할을 함
• 필요한 경우 추가적인 데이터를 함께 포함할 수 있음.
• ex) { type : ‘INCREMENT’, amount : 1}

// base
import { createAction } from '@reduxjs/toolkit';

// default
export const AUTH = 'auth';
export const AUTH_SLICE_NAME = `${AUTH}Slice`;

// action
const AUTH_USER_LOGIN = `${AUTH}/userLogin`;

// createAction
const userLoginAction = createAction(AUTH_USER_LOGIN);

// actions
export const actions = {
  userLoginAction,
};

슬라이스(Slice)

• 슬라이스는 Redux에서 관련 있는 상태와 액션을 그룹화한 작은 모듈 단위
• 리듀서, 액션 타입, 액션 생성자 함수 등을 포함할 수 있음.
• Redux Toolkit을 사용하면 슬라이스를 생성하기 위한 보다 편리한 기능들을 제공함

// base
import { createSlice } from '@reduxjs/toolkit';
import { AUTH_SLICE_NAME } from '../actions/auth.action';

// thunks
import { userLogin } from '../thunks/auth.thunk';

// initialState
const initialState = {
  userInfo: undefined,
};

// createSlice
const authSlice = createSlice({
  name: AUTH_SLICE_NAME,
  initialState,
  reducers: {},
  extraReducers: builder => {
    builder
      .addCase(userLogin.fulfilled, (state, action) => {
        const { userId, ACCESS_TOKEN, REFRESH_TOKEN } = action.payload;

        state.userInfo = { userId, ACCESS_TOKEN, REFRESH_TOKEN };
      });
  },
});

export const auth = authSlice.name;
export const authReducer = authSlice.reducer;
export const authActions = authSlice.actions;
export default authSlice.reducer;

Thunk :

• Redux Thunk는 Redux에서 비동기 작업을 처리하기 위한 미들웨어
• Thunk 미들웨어는 액션 생성자가 함수를 반환하는 경우에 동작하며, 이 함수는 비동기 작업을 수행 할 수 있다.
• 이를 통해 비동기 작업을 시작하고, 필요한 경우에 비동기 작업이 완료될 때까지 기다린 다음에 액션을 디스패치 할 수 있다.

// base
import { createAsyncThunk } from '@reduxjs/toolkit';

// api
import { authApi } from '../apis/auth.api';

// action
import { actions } from '../actions/auth.action';
import { uiActions } from 'modules/ui';

// service
import { COOKIE_ACCESS_TOKEN, COOKIE_REFRESH_TOKEN } from 'services/cookie';
import { storageService } from 'services';
/**
 * 로그인
 */
export const userLogin = createAsyncThunk(
  actions.userLoginAction,
  async (data, { dispatch, fulfillWithValue, rejectWithValue }) => {
    try {
      const res = await authApi.usersLogin(data);
      console.log({ res });
      const { userId, ACCESS_TOKEN, REFRESH_TOKEN } = res;

      storageService.session.setItem(COOKIE_ACCESS_TOKEN, res.ACCESS_TOKEN);

      return fulfillWithValue({
        // code: res.code,
        // isSuccess: res.isSuccess,
        // message: res.message,
        userId,
        ACCESS_TOKEN,
        REFRESH_TOKEN
      });
    } catch (error) {
      return rejectWithValue(error);
    }
  }
);