[react] 리액트 네이티브에서의 리덕스 비동기 상태 관리

22 Dec 2023

react

리액트 네이티브 앱을 개발할 때 비동기 작업을 수행하여 서버로부터 데이터를 가져오거나 다양한 상태를 관리해야 하는 경우가 많습니다. 이때 리덕스와 함께 비동기 상태 관리를 어떻게 해야 하는지 알아보겠습니다.

1. 리덕스 미들웨어

리덕스에서 비동기 작업을 수행하기 위해서는 미들웨어를 사용해야 합니다. 가장 대표적으로 사용되는 미들웨어는 redux-thunk와 redux-saga가 있습니다. 이들 미들웨어를 사용하면 액션 생성자에서 비동기 작업을 처리할 수 있습니다.

2. redux-thunk 사용하기

redux-thunk를 사용하면 액션 생성자가 함수를 반환할 수 있습니다. 이 함수는 dispatch와 getState를 인자로 받아 비동기 작업을 수행하고 필요한 액션을 디스패치할 수 있습니다.

const fetchData = () => {
  return (dispatch, getState) => {
    // 비동기 작업 수행
    dispatch({ type: 'FETCH_DATA_START' });

    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }))
      .catch(error => dispatch({ type: 'FETCH_DATA_FAILURE', payload: error }));
  };
};

3. redux-saga 사용하기

redux-saga를 사용하면 제너레이터 함수를 이용하여 비동기 작업을 처리할 수 있습니다. 이를 통해 액션을 모니터링하고 필요한 액션이 발생할 때 비동기 작업을 수행할 수 있습니다.

import { call, put, takeEvery } from 'redux-saga/effects';
import { fetchDataSuccess, fetchDataFailure } from './actions';

function* fetchDataSaga() {
  try {
    const data = yield call(fetch, 'https://api.example.com/data');
    yield put(fetchDataSuccess(data));
  } catch (error) {
    yield put(fetchDataFailure(error));
  }
}

function* rootSaga() {
  yield takeEvery('FETCH_DATA_REQUEST', fetchDataSaga);
}

마치며

리액트 네이티브에서의 비동기 상태 관리는 리덕스와 함께 미들웨어를 사용하여 쉽게 처리할 수 있습니다. redux-thunk와 redux-saga를 적절히 활용하여 앱의 비동기 작업을 효율적으로 관리할 수 있습니다.