Redux를 사용하여 바닐라와 React 앱 간의 상태 공유

문제 진술

바닐라 js와 리액트 앱의 공통 데이터 상태를 공유하고 싶습니다.

이 POC에는 무엇이 포함되어 있나요?

• 바닐라에서 비슷한 카운터 앱 2개를 만들어 반응해보겠습니다.
• 카운트는 공통 상태로 저장되어야 합니다
• 바닐라에서 카운트를 업데이트하면 리액트와 바이스버스에도 반영되어야 합니다

프로젝트 구조

저희 프로젝트는 두 가지 주요 섹션으로 나뉩니다.

1. 루트 디렉터리: 앱의 바닐라 JavaScript 부분에 대한 핵심 파일이 포함되어 있습니다.
2. react-mf 디렉토리: 바닐라 JavaScript 부분과 상호작용하는 React 마이크로 프론트엔드가 있습니다.

앱의 아키텍처는 여기 링크에서 확인할 수 있습니다

주요 파일 및 해당 역할

루트 디렉터리

• index.html: 이는 HTML 구조를 설정하고 스타일시트 및 JavaScript 파일에 대한 링크를 포함하는 앱의 진입점입니다. 여기에는 각각 바닐라 JS 앱과 React 마이크로 프런트엔드를 마운트하는 데 사용되는 id="app" 및 id="root"가 있는 두 가지 핵심 div 요소가 있습니다.

• main.js: 앱의 바닐라 JS 부분을 초기화하기 위한 기본 JavaScript 파일 역할을 합니다. 핵심 로직을 처리하고 공유 상태와 상호작용합니다.

• counter.js: Redux 스토어에 작업을 전달하는 코드가 포함되어 있습니다. 예를 들어 카운터를 업데이트하기 위해 INCREMENT 작업을 전달합니다.

• store.js: 애플리케이션 상태를 관리하고 바닐라 JS와 앱의 React 부분 간의 일관성을 보장하는 Redux 스토어를 설정합니다.

반응-mf 디렉토리

• App.jsx: 마이크로 프론트엔드의 주요 React 구성 요소입니다. 로컬 상태 관리를 위해 useState 후크를 활용하고 Redux 저장소를 구독하여 전역 상태를 반영합니다. INCREMENT 작업을 전달하는 버튼을 렌더링하고 스토어의 현재 개수를 표시합니다.

• main.jsx: React 앱이 초기화되고 렌더링되는 React 마이크로 프론트엔드의 진입점입니다.

GitHub 저장소에서 전체 코드를 찾을 수 있습니다.

위 내용은 Redux를 사용하여 바닐라와 React 앱 간의 상태 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!