Redux ToolKit With Redux Saga 리덕스 툴킷으로 리덕스 사가 사용하기

Redux Saga

리덕스 사가란, 리덕스를 사용할 때 특정 리듀스 액션을 관찰하고 있다가, 그 액션이 실행 되면서 동시에 다른 행동을 취할 수 있게 해주는 함수 입니다.

보통 백엔드 통신을 할 때 많이 사용합니다.

Redux Saga Effect

리덕스 사가 이펙트함수란,

• call : 함수를 동기적으로 실행
• all : 매개변수 배열안에 있는 함수들을 실행
• fork : 함수를 비동기적으로 실행
• takeLatest : 짧은 시간내에 액션이 관측되면 그 액션이 들어온 맨 마지막 것만 받아들여서 실행
• delay : 매개변수에 있는 시간만큼 잠깐 멈춤
• put : dispatch() 와 동일

등의 이펙트 함수가 있다. 이러한 이펙트 함수로 사용자들이 편리하게 함수를 구현할 수 있다.

Generator Function

Genragtor Function 이란,
function* FunctionName() {} 이런식으로 쓰이게 되는데, 비교적 쉽게 설명하면, yield 가 나오기 전 까지 실행하다가 yield에 해당하는 값을 return하고, (함수면 호출하고) next()을 기다리는 함수이다.

Redux Saga Effect 들은 이 Generator 함수를 사용해서 이루어진다.

Redux Saga 와 Redux Tollkit 연동하기

Configure Store

const reducers = combineReducers({
  dark: darkSlice.reducer,
  user: userSlice.reducer,
});
const sagaMiddleware = createSagaMiddleware();

const createStore = () => {
  const store = configureStore({
    reducer: reducers,
    middleware: [...getDefaultMiddleware(), sagaMiddleware],
    devTools: process.env.NODE_ENV !== "production",
  });
  sagaMiddleware.run(rootSaga);
  return store;
};

export type RootState = ReturnType<typeof reducers>;
export default createStore;

Saga

function loginUserAPI(data: { email: string; password: string }) {
  return axios.post("http://", data);
}

function* loginUser(
  action: PayloadAction<{ email: string; password: string }>
) {
  try {
    const result = yield call(loginUserAPI, action.payload);
    yield delay(1000);
    yield put(loginSuccessAction(result.data[0]));
  } catch (err) {
    console.error(err);
    yield put({
      type: loginErrorACtion.type,
      payload: {
        error: "로그인 에러",
      },
    });
  }
}

function* watchLoginUser() {
  yield takeLatest(loginAction, loginUser);
}

export default function* userSaga(): Generator<
  AllEffect<ForkEffect<void>>,
  void,
  unknown
> {
  yield all([fork(watchLoginUser)]);
}

Redux Saga와 기본 Redux와 함께 쓰는 형태는 거의 같다. fork 를 사용할 때, redux-toolkit에서 액션 타입 명을 따로 지정해주지 않기 때문에 무엇을 써야할지 감이 안잡힐 수가 있기 때문에 loginErrorAction.type 을 사용해줘야 한다. 이렇게 type명을 사용하지 않고 액션 자체를 쓰기 위해서는 fork(loginSuccessAction) 을 사용하면 된다.

즉, 그냥 dispatch() 똑같다...

/* 리덕스 */
dispatch({
  type: action.type,
  payload: data
})

/* 리덕스 툴킷 */
dispatch(action(data))