[react] 리액트 네이티브에서 비동기 처리와 리덕스

22 Dec 2023

react

리액트 네이티브 앱을 개발할 때, API 호출, 데이터 가져오기 등의 비동기 작업을 수행해야 할 때가 있습니다. 이때 리덕스와 함께 비동기 처리를 어떻게 해야 하는지 알아보겠습니다.

1. Redux Thunk 사용하기

리덕스에서 비동기 작업을 처리하기 위해 Redux Thunk를 사용할 수 있습니다. Redux Thunk는 액션 생성자에서 비동기 작업을 수행하고, 다른 액션을 dispatch 하도록 허용합니다.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

2. 비동기 작업 처리

Redux Thunk를 이용하여 비동기 작업을 처리하는 예시입니다. fetchData 액션 생성자는 API를 호출하여 데이터를 가져온 후에 fetchSuccess 또는 fetchError 액션을 디스패치합니다.

export const fetchData = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCHING_DATA' });
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => dispatch({ type: 'FETCH_SUCCESS', payload: data }))
      .catch((error) => dispatch({ type: 'FETCH_ERROR', payload: error }));
  };
};

3. Redux-Saga 사용하기

Redux-Saga는 리덕스 미들웨어로서 비동기 작업을 보다 세밀하게 제어할 수 있는 라이브러리입니다. 여러 작업들을 순차적으로 또는 병렬로 처리할 수 있습니다.

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);

4. 비동기 작업 처리

Redux-Saga를 이용하여 비동기 작업을 처리하는 예시입니다. fetchData 사가는 API를 호출하여 데이터를 가져온 후에 fetchSuccess 또는 fetchError 액션을 디스패치합니다.

import { call, put, takeEvery } from 'redux-saga/effects';
import Api from './api';

function* fetchData(action) {
  try {
    const data = yield call(Api.getData);
    yield put({ type: 'FETCH_SUCCESS', payload: data });
  } catch (error) {
    yield put({ type: 'FETCH_ERROR', error });
  }
}

function* watchFetchData() {
  yield takeEvery('FETCHING_DATA', fetchData);
}

export default function* rootSaga() {
  yield all([
    watchFetchData()
  ]);
}

이제 리액트 네이티브 앱에서 비동기 작업을 리덕스와 함께 처리하는 방법에 대해 알아보았습니다. Redux Thunk와 Redux-Saga 중에서 선택하여 사용할 수 있으며, 프로젝트의 요구사항에 맞게 적절히 활용할 수 있습니다.

만약 이 중요한 주제에 대해 더 자세히 알고 싶다면, 공식 Redux 문서를 참고하시기 바랍니다.