U

Redux는 자바스크립트 애플리케이션을 위한 예측 가능한 상태 컨테이너를 제공하는 상태 관리 라이브러리입니다. 애플리케이션의 상태를 중앙에서 관리할 수 있으므로 코드를 더 쉽게 이해하고 디버깅할 수 있습니다. Redux의 핵심 개념은 애플리케이션의 전체 상태를 보관하는 JavaScript 객체인 저장소입니다. 상태의 변경 사항을 설명하는 일반 JavaScript 객체인 액션을 사용하여 스토어를 업데이트할 수 있습니다. 리듀서는 현재 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다.

다음은 React Native 애플리케이션에서 Redux를 사용하는 방법을 보여주는 예시 코드입니다

먼저 필요한 패키지를 설치해야 합니다.

npm install redux react-redux

다음으로 스토어와 reducer를 생성합니다

import { createStore } from 'redux';

const initialState = {
  counter: 0
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        counter: state.counter + 1
      };
    case 'DECREMENT':
      return {
        ...state,
        counter: state.counter - 1
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

이 예제에서 스토어의 초기 상태에는 0으로 설정된 카운터 변수가 포함되어 있습니다. reducer는 현재 상태와 작업을 입력으로 받아 작업 유형에 따라 새 상태를 반환합니다.

컴포넌트에서 store를 사용하려면 react-redux의 connect 함수를 사용하여 컴포넌트를 store에 연결해야 합니다

import React from 'react';
import { View, Text, Button } from 'react-native';
import { connect } from 'react-redux';

const Counter = ({ counter, increment, decrement }) => {
  return (
    <View>
      <Text>{counter}</Text>
      <Button title="Increment" onPress={increment} />
      <Button title="Decrement" onPress={decrement} />
    </View>
  );
};

const mapStateToProps = state => ({
  counter: state.counter
});

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' })
});

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

이 예제에서 카운터 컴포넌트는 mapStateToProps 함수를 통해 스토어에서 카운터 prop을 받습니다. 증가 및 감소 함수는 mapDispatchToProps 함수를 통해 버튼 컴포넌트의 onPress 이벤트에 매핑됩니다. 버튼 컴포넌트를 누르면 해당 액션이 스토어로 디스패치되어 상태가 업데이트되고 컴포넌트가 다시 렌더링됩니다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0