[react] 리액트 네이티브에서의 리덕스 상태 업데이트

22 Dec 2023

react

리액트 네이티브 애플리케이션을 개발하다 보면 리덕스(Redux)를 사용하여 애플리케이션 전체의 상태를 관리하는 경우가 많습니다. 이때, 상태를 업데이트하고 변경사항을 반영하기 위해 몇 가지 방법을 사용할 수 있습니다.

useDispatch 훅을 사용한 상태 업데이트

가장 간단한 방법은 useDispatch 훅을 사용하여 액션을 디스패치하는 것입니다.

import { useDispatch } from 'react-redux';

const MyComponent = () => {
  const dispatch = useDispatch();

  const handleUpdate = () => {
    dispatch({ type: 'UPDATE_VALUE', payload: 'new value' });
  }

  return (
    <button onClick={handleUpdate}>Update</button>
  );
}

useSelector 훅을 사용하여 상태 가져오기

useSelector 훅을 사용하여 리덕스 스토어에서 상태를 가져와서 사용할 수 있습니다.

import { useSelector } from 'react-redux';

const MyComponent = () => {
  const value = useSelector(state => state.value);

  return (
    <div>{value}</div>
  );
}

redux-thunk를 사용하여 비동기 작업 처리

비동기 작업을 처리해야 하는 경우, redux-thunk를 사용하여 액션 생성자에서 비동기 작업을 수행할 수 있습니다.

const fetchUserData = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_USER_REQUEST' });

    fetchData()
      .then(data => dispatch({ type: 'FETCH_USER_SUCCESS', payload: data }))
      .catch(error => dispatch({ type: 'FETCH_USER_FAILURE', payload: error }));
  };
};

결론

이러한 방법들을 사용하여 리액트 네이티브 애플리케이션에서 리덕스 상태를 업데이트할 수 있습니다. useDispatch와 useSelector를 사용하여 간편하게 상태를 업데이트하고 가져올 수 있으며, 비동기 작업을 처리해야 하는 경우 redux-thunk를 활용할 수 있습니다.

참고 문헌: