[react] 리액트 네이티브에서의 리덕스 상태 초기화

22 Dec 2023

react

리액트 네이티브 앱을 개발하다 보면, 리덕스 상태를 초기화해야 하는 경우가 있습니다. 예를 들어, 로그아웃 기능을 구현할 때 사용자 정보나 토큰을 초기화해야 할 수 있습니다. 이때, 리액트 네이티브에서 리덕스 상태를 초기화하는 방법에 대해 알아보겠습니다.

초기화 액션 타입 정의

가장 먼저, 리덕스 상태를 초기화하고자 하는 경우를 위한 액션 타입을 정의해야 합니다. 이를 통해 해당 액션을 디스패치하여 상태를 초기화할 수 있습니다.

// actions/types.js

export const RESET_STATE = 'RESET_STATE';

초기화 액션 생성자 작성

다음으로, 액션 생성자를 작성하여 초기화 액션을 만들어야 합니다. 이 액션 생성자를 통해 초기화 액션을 디스패치할 수 있습니다.

// actions/index.js

import { RESET_STATE } from './types';

export const resetState = () => {
  return {
    type: RESET_STATE,
  };
};

초기화 리듀서 처리

이제 초기화 액션에 대한 리듀서를 처리해야 합니다. 이를 통해 해당 액션이 디스패치될 때 상태를 초기화할 수 있습니다.

// reducers/index.js

import { RESET_STATE } from '../actions/types';

const initialState = {
  // 초기 상태 정의
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case RESET_STATE:
      return initialState;
    default:
      return state;
  }
};

export default rootReducer;

사용 예시

위와 같이 설정하고 나면, 초기화 기능이 필요한 컴포넌트에서 resetState 액션 생성자를 임포트하고 이를 호출하여 상태를 초기화할 수 있습니다.

// components/LogoutButton.js

import React from 'react';
import { connect } from 'react-redux';
import { resetState } from '../actions';

const LogoutButton = ({ resetState }) => {
  const handleLogout = () => {
    // 사용자 로그아웃 처리
    resetState(); // 상태 초기화
  };

  return (
    <button onClick={handleLogout}>로그아웃</button>
  );
};

export default connect(null, { resetState })(LogoutButton);

위 방법을 통해, 리액트 네이티브 앱에서 리덕스 상태를 초기화할 수 있습니다.