redux-saga를 이용한 비동기 구현

react, react-toolkit, redux-saga 이 세가지 조합으로 비동기 작업을 구현하는 방법을 기록해보자 - 🚀 

---

#. 목표: list 페이지 진입 시 서버에 데이터를 요청하고 받은 데이터를 화면에 보여주기

 

1) 가장 먼저 api 호출하는 코드를 작성해보자. axios를 이용해 get 요청을 서버에 보내고 서버가 응답해준 데이터를 리턴한다.

// api code

export const latestVideos = async () => {
  try {
    const result = await axios.get('/videos/latest');
	if(result) return res.data;
  } catch(err) {
	console.log(err)
  }

}

 

2) react-toolkit을 이용해 action과 reducer를 만들자. 보통 request, success, failure 이 세가지 액션을 기본 세트로 자주 사용하는거 같다. 위에 api 호출하여 서버로부터 받은 데이터를 latestVideosSuccess 시 action.payload 값으로 전달 받게 된다.

// reducer code

import { createSlice } from '@react/toolkit';

const initialState = {
  loading: false,
  data: [],
  error: false
};

const latestVideosReducer = createSlice({
  name: 'latestVideosReducer',
  initialState,
  reducers: {
    latestVideosRequest: (state, action) => {
	  return {...state, loading: true}
	},
    latestVideosSuccess: (state, action) => {
      const data = action.payload;
	  return {...state, data, loading: false}
	},
    latestVideosFailure: (state, action) => {
      const error = action.payload;
      return {...state, error, loading: false}
    }
  }
});

export const {
  latestVideosRequest, 
  latestVideosSuccess, 
  latestVideosFailure 
} = latestVideosReducer.actions;

export default latestVideosReducer.reducer;

 

3) 그리고 saga를 세팅한다. latestVidoes api가 호출되어 data 값이 담기고, 그 data를 latestVideosSuccess에 전달한다. 그럼 위의 reducer대로 동작한다.

// saga code

import { call, put, takeEvery } from 'redux/saga/effects';
import { latestVideos } from '../../api/videoApi.js';
import { 
  latestVideosRequest, 
  latestVideosSuccess, 
  latestVideosFailure 
} from '../reducer/LatestVideosReducer.js';

function* latestVideosSaga(action) {
  try {
    const data = yield call(latestVideos};
    yield put(latestVideosSuccess(data));
  } catch(err) {
    yield put(latestVideosFailure(true));
  }
}

function* rootSaga() {
  yield takeEvery(latestVideosRequest.type, latestVideosSaga);
}

export default rootSaga

 

4) 마지막으로 reducer와 saga를 store에 연결해야 한다.

// store code

import { configureStore, combineReducers } from '@reduxjs/toolkit';
import LatestVideosReducer form '../redux/reducer/LatestVideosReducer.js';
import rootSaga from '../redux/saga/saga/js';

const reducer = combineReducers({
  latestVideos: LatestVidoesReducer
});

const sagaMiddleware = createSagaMiddleware();

const store = configureStore({
  reducer,
  middleware: [sagaMiddleware]
});

sagaMiddleware.run(rootSaga);

export default store;

 

5) 이렇게 api, reducer, saga, store 모두 세팅이 완료되었다면 이제 해당 페이지 컴포넌트에서 useDispatch를 이용해 동작시키면 된다. 그리고 useSelector를 이용해 store에 저장된 data 값을 가져다 사용하면 된다.

// component code

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { latestVideosRequest } from '../../redux/reducer/LatestVideosReducer.js';

const LatestVideos = () => {
  const dispatch = useDispatch();
  const { data } = useSelect(state => state.latestVideos);
  
  useEffect(() => {
    dispatch(latestVideosRequest());
  }, [])
  
  return (
   <-- 생략 --> 
  )

}