How to Add Redux Saga to Rtk

Table of contents

STEP 1. Import middleware to store

import { configureStore } from '@reduxjs/toolkit'
import { useDispatch, useSelector } from 'react-redux'
import type { TypedUseSelectorHook } from 'react-redux'
import createSagaMiddleware from 'redux-saga'
import yourReducer from './slices/yourSlice'
import { rootSaga } from './saga'

const sagaMiddleware = createSagaMiddleware()

export const store = configureStore({
  reducer: {
    your: yourReducer,
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware().concat(sagaMiddleware),
})

sagaMiddleware.run(rootSaga)

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

STEP 2. create desired saga and import it

// /saga/fetchAllList.ts
import { queryAllFavImgList } from '@/request/favimglist/query'
import { setFavImgList } from '@/store/slices/favImgList'
import { call, put } from 'redux-saga/effects'

export function* fetchAllList(): unknown {
  const allList = yield call(queryAllFavImgList)

  yield put(setFavImgList(allList))
}

// /saga/index.ts

import { all } from 'redux-saga/effects'
import { fetchAllList } from './fetchAllList'

function* rootSaga() {
  yield all([fetchAllList()])
}

export { rootSaga }