상태 관리

일부 스토어프런트 애플리케이션에는 글로벌 상태를 관리할 방법이 필요합니다. Redux, MobX 등, 이 작업을 수행하는 데 유용한 상태 관리 라이브러리가 많이 있습니다. Salesforce는 특정 상태 관리 라이브러리를 다른 라이브러리보다 선호하지 않으며, 이러한 라이브러리를 전혀 사용하지 않고도 PWA Kit 앱을 만들 수 있습니다.

언제든지 속성을 통해 구성요소에 상태 정보를 제공할 수 있지만, 이 가이드에서는 React의 고급 기능을 사용하여 상태를 관리하는 다른 접근 방식도 다룹니다.

구성요소 간에 상태를 공유하는 가장 간단한 기법은 속성을 통해 구성요소에 상태 정보를 제공하는 것입니다. 해당 구성요소는 상태 데이터에 액세스해야 하는 모든 구성요소의 상위 구성요소여야 합니다. React 문서에서는 이 기법을 자세히 설명하며, 상태 리프팅이라고 합니다.

React의 Context API는 앱의 각 구성요소 트리에 있는 속성을 통해 데이터를 수동으로 전달할 필요 없이 많은 구성요소에 데이터를 제공하는 프로세스를 단순화합니다.

다음은 모든 구성요소에 대해 래퍼 역할을 하는 구성요소와 함께 React Context API를 사용하여 공유 상태 데이터를 제공하는 방법을 보여주는 예입니다.

두 개의 컨텍스트 오브젝트가 있는 GlobalState라는 구성요소를 생성하는 것부터 시작합니다.

GlobalStateContext: 글로벌 상태 데이터를 저장할 수 있는 위치입니다.
GlobalDispatchContext: reducer 함수를 통해 글로벌 상태의 업데이트된 스냅샷을 반환하는 dispatch 함수입니다.

각 컨텍스트 오브젝트에는 컨텍스트 변경 사항을 구독할 수 있는 <Provider> 구성요소가 포함되어 있습니다. 여기서 컨텍스트 오브젝트는 initialState 및 dispatch 속성으로 초기화됩니다. 이러한 속성은 useReducer 후크를 사용하여 상태를 reducer와 연결합니다. Context API와 함께 React 후크를 사용하는 방법을 비롯하여 React 후크에 대한 자세한 내용은 공식 React 후크 참조 설명서를 참조하십시오.

다음은 Context API를 사용하여 글로벌 상태를 스토어프런트 앱에 저장하는 구성요소를 정의하고 초기화하는 방법입니다.

app/components/_app-config/index.jsx에 위치한 AppConfig 특수 구성요소에서 상태 관리 시스템을 초기화합니다. 여기서 props.children에는 앱의 모든 구성요소가 포함되어 있으므로 GlobalState 구성요소를 추가할 수 있습니다.

속성 오브젝트를 가져오려면 먼저 오브젝트를 초기화해야 합니다. React 후크 useReducer를 사용하여 리듀서에 연결된 상태를 만듭니다. useReducer 함수는 GlobalState 구성요소에서 가져온 initialState 오브젝트와 reducer를 받습니다. 다음으로 연결된 상태를 전달하고 dispatch 함수를 통해 상태를 수정합니다.

예:

이제 글로벌 컨텍스트 데이터를 업데이트하는 권한을 비롯하여 모든 구성요소에 대한 액세스 권한을 부여할 수 있습니다. GlobalState 구성요소에서 GlobalStateContext와 GlobalDispatchContext라는 컨텍스트 오브젝트를 가져와 useContext() 메서드에 제공합니다.

예:

app/components/_app-config/index.jsx에 있는 기본 AppConfig 특수 구성요소를 재정의하여 상태 관리 라이브러리를 사용하도록 애플리케이션을 맞춤화할 수 있습니다.

AppConfig 내에 PWA용 Redx를 설정하는 방법은 다음과 같습니다. 구성요소에는 다음 네 가지 메서드를 사용해야 합니다.

restore 메서드는 리듀서, 초기 상태 및 미들웨어를 사용하여 Redux 매장을 생성하는 메서드입니다.
freeze 메서드는 페이지 HTML에 임베딩하기 위한 상태 관리 백엔드를 프리즈할 수 있도록 합니다.
extraGetPropsArgs 메서드는 전체 앱에서 getProps 메서드에 삽입하고자 하는 추가 인수를 반환할 수 있습니다. 이 경우 추가 인수로 Redux 매장을 반환할 수 있습니다.
render 메서드를 사용하면 상태 관리 라이브러리에 대한 컨텍스트 공급자를 설정할 수 있습니다. 예를 들어 앱을 Redux 공급자로 래핑하는 데 사용할 수 있습니다.

다음은 AppConfig의 메서드를 사용하여 스토어프런트 앱에 대해 Redx를 설정하는 간단한 예입니다. 여기에 나와 있는 단계 외에도 완전한 솔루션을 사용하려면 리듀서, 초기 상태 및 필요한 미들웨어를 사용하여 매장을 만들어야 합니다.