React가없는 Redux

이 기사는 Vildan Softic이 동료 검토했습니다. Sitepoint의 콘텐츠를 완벽하게 만들어 주신 Sitepoint의 모든 동료 검토 자에게 감사드립니다!

나는 처음부터 시작하여 모든 것이 어떻게 작동하는지 이해하는 것을 좋아하는 종류의 개발자입니다. 이것이 나 자신이 (불필요한) 워크로드를 가져 오는 것을 알고 있지만, 특정 프레임 워크, 라이브러리 또는 모듈의 메커니즘을 이해하고 이해하는 데 도움이됩니다.

최근에, 나는이 순간을 다시 경험하고 Redux와 Pure JavaScript를 사용하여 웹 응용 프로그램을 개발하기 시작했습니다. 이 기사에서는 응용 프로그램 구조를 간략하게 설명하고 초기 (마지막으로 실패한) 반복을 검사 한 다음 마지막으로 선택한 솔루션과 그 과정에서 배운 내용을 살펴보고 싶습니다.

키 포인트

Redux는 Pure JavaScript를 사용하여 React에 의존하지 않고 응용 프로그램 상태를 관리하여 다른 UI 계층의 상태 관리의 유연성을 보여줄 수 있습니다.

Redux 스토리지를 올바르게 초기화하고 관리하는 것이 중요합니다.

Redux 전용 설정에서 구성 요소는 React의 구성 요소 구조와 유사 할 수 있으며 프레젠테이션 및 컨테이너 레이어로 나뉘어 우려 사항을 분리하고 역할 정의를 명확하게하는 데 도움이됩니다.

Pure JavaScript 및 Redux를 사용할 때는 React의 Virtual DOM (상태 업데이트를 기반으로 UI 변경을 자동으로 처리 함)과 달리 DOM을 수동으로 업데이트해야합니다. 사용 사례 중심 스토리지를 구현하여 필요한 데이터 만 저장되도록하는 것이 좋습니다. 이는 불필요한 상태 지속성을 피함으로써 성능 및 사용자 경험을 향상시킬 수 있습니다.

설정

• 최신 프론트 엔드 기술을 사용하여 빠르고 강력한 웹 애플리케이션을 구축하는 인기있는 React.js 및 Redux 조합에 대해 들어 보셨을 것입니다.
React는 사용자 인터페이스를 구축하기 위해 Facebook에서 만든 구성 요소 기반 오픈 소스 라이브러리입니다. React는 단지 뷰 레이어 일 뿐이지 만 (
• 는 Angular 또는 Ember 와 같은 완전한 프레임 워크는 아니지만 Redux는 응용 프로그램의 상태를 관리합니다. 전체 상태가 단일 객체 트리에 저장되는 예측 가능한 상태 컨테이너로 작용하며 소위 를 발행 하여만 변경할 수 있습니다. 이 주제를 전혀 이해하지 못하면이 기사를 읽는 것이 좋습니다.
이 기사의 나머지 부분에 대해서는 Redux 전문가가 될 필요는 없지만 적어도 그 개념에 대한 이해를 갖는 것이 도움이 될 것입니다.
• 반응이없는 redux-처음부터 응용 프로그램
Redux의 장점은 가능한 한 빨리 애플리케이션의 디자인을 미리 생각하고 이해하도록 강요한다는 것입니다. 실제로 저장해야 할 내용, 변경 사항 및 변경 사항 및 스토리지에 액세스 할 수있는 구성 요소를 정의하기 시작합니다. 그러나 Redux는 상태에만 초점을 맞추기 때문에 나머지 응용 프로그램을 구축하고 연결하는 방법에 대해 약간 혼란스러워합니다. React는 모든 단계를 통해 당신을 안내하는 훌륭한 일을하지만, 그것 없이는 무엇이 가장 잘 작동하는지 알아 내야합니다.
• 문제의 응용 프로그램은 여러 개의 다른 견해를 가진 모바일 우선 테트리스 클론입니다. 실제 게임 로직은 Redux에서 수행되며 오프라인 기능은 LocalStorage 및 사용자 정의보기 처리에서 제공됩니다. 이 저장소는 GitHub에서 찾을 수 있지만 앱은 여전히 ​​활성화 중이며 개발 중에이 기사를 썼습니다.
  응용 프로그램 아키텍처 정의 나는 Redux 및 React Projects에서 공통적 인 폴더 구조를 채택하기로 결정했습니다. 이것은 다양한 설정에서 작동하는 논리적 구조입니다. 이 주제에는 많은 변형이 있으며 대부분의 프로젝트는 약간 다르지만 전체 구조는 동일합니다. > src/scripts/ 내 태그는 다른 디렉토리로 분리되어 단일 index.html 파일로 렌더링됩니다. 이 구조는 스크립트와 유사합니다. 코드 기반 전체에 걸쳐 일관된 아키텍처를 유지합니다. /> src/markup/
  스토리지 관리 및 액세스

  스토리지에 액세스하려면 응용 프로그램의 모든 인스턴스를 생성하고 전달해야합니다. 대부분의 프레임 워크는 일종의 종속성 분사 컨테이너를 사용하므로 프레임 워크 사용자는 스스로 솔루션을 제시 할 필요가 없습니다. 그러나 내 자신의 솔루션을 사용하면 모든 구성 요소에 어떻게 사용할 수 있습니까?

  첫 번째 반복이 실패했습니다. 왜 이것이 좋은 생각이라고 생각하는지 모르겠지만 스토리지를 자체 모듈 (Scripts/Store/Index.js)에 넣은 다음 응용 프로그램의 나머지 부분에서 가져올 수 있습니다. 나는 그것을 후회하고 순환 의존성을 빨리 다루었 다. 문제는 구성 요소가 스토리지에 액세스하려고 할 때 스토리지가 올바르게 초기화되지 않는다는 것입니다. 내가 작업중 인 의존성 흐름을 보여주기 위해 차트를 만들었습니다.

  <code>actions/
  ├── game.js
  ├── score.js
  └── ...
  components/
  ├── router.js
  ├── pageControls.js
  ├── canvas.js
  └── ...
  constants/
  ├── game.js
  ├── score.js
  └── ...
  reducers/
  ├── game.js
  ├── score.js
  └── ...
  store/
  ├── configureStore.js
  ├── connect.js
  └── index.js
  utils/
  ├── serviceWorker.js
  ├── localStorage.js
  ├── dom.js
  └── ...
  index.js
  worker.js</code>

  애플리케이션 입력 지점은 모든 구성 요소를 초기화 한 다음 내부적으로 직접 또는 직접 또는 도우미 기능을 통해 스토리지를 사용합니다 (여기서는 Connect ). 그러나 스토리지가 명시 적으로 생성되지는 않지만 자체 모듈의 부작용 일 뿐이므로 구성 요소는 스토리지가 생성되기 전에 사용됩니다. 구성 요소 또는 도우미 기능이 먼저 저장하도록 요청 된 시간에 대한 제어는 없습니다. 이것은 매우 혼란 스럽습니다.

  스토리지 모듈은 다음과 같습니다 > 스크립트/스토어/index.js (☓ bad)

  <code>layouts/
  └── default.html
  partials/
  ├── back-button.html
  └── meta.html
  pages/
  ├── about.html
  ├── settings.html
  └── ...
  index.html</code>

  위에서 언급 한 바와 같이, 스토리지는 부작용으로 생성 된 다음 내 보냅니다. 도우미 기능도 저장해야합니다.

  /> 스크립트/스토어/Connect.js (☓ bad)

  이것은 내 구성 요소가 서로 재발하는 순간입니다. 헬퍼 기능은 스토리지를 실행해야하며 스토리지 초기화 파일에서 동시에 내보내므로 응용 프로그램의 다른 부분에 액세스 할 수 있습니다. 이것이 얼마나 지저분한 소리가 보입니까?

  솔루션 지금은 분명해 보이며 이해하는 데 시간이 걸렸습니다. 초기화를 애플리케이션 입력 지점 (Scripts/Index.js)으로 이동하여 필요한 모든 구성 요소로 전달하여이를 해결했습니다.

  다시, 이것은 React가 실제로 스토리지에 액세스 할 수있게 만드는 방법과 매우 유사합니다 (소스 코드 참조). 그들이 함께 일하는 이유가 있습니다. 왜 그 개념을 배우지 않겠습니까?

  Application Entry Point는 먼저 스토리지를 생성 한 다음 모든 구성 요소로 전달합니다. 그런 다음 구성 요소는 저장 및 일정 작업에 연결하거나 변경 사항을 구독하거나 특정 데이터를 얻을 수 있습니다. 변경 사항을 살펴 보겠습니다 : /> 스크립트/스토어/configurestore.js (✓ 좋은)

  나는 모듈을 유지했지만 대신 코드베이스의 다른 곳에서 스토리지를 생성하는 configurestore라는 함수를 내보냈다. 이것은 단지 기본적인 개념 일 뿐이며, 나는 또한 Redux Devtools 확장을 사용하고 LocalStorage를 통해 영구 상태를로드했습니다.

  /> 스크립트/스토어/Connect.js (✓ 좋은)

  Connect 도우미 기능은 기본적으로 변경되지 않았지만 이제는 스토리지를 매개 변수로 전달해야합니다. 처음에는이 솔루션을 사용하는 것을 망설였다. 이제 나는 그들이 모든 것을 더 쉽게 읽을 수 있도록 좋고 발전했다고 생각합니다. /> scripts/index.js

  이것은 응용 프로그램 입력 지점입니다. 상점은 생성되어 모든 구성 요소에 전달됩니다. PageControls는 특정 액션 버튼에 대한 글로벌 이벤트 리스너를 추가하고 TetrisGame은 실제 게임 구성 요소입니다. 기본적으로 스토리지를 여기로 이동하기 전에 동일하게 보이지만 모든 모듈에 스토리지를 별도로 전달하지는 않습니다. 앞에서 언급했듯이 컴포넌트는 실패한 연결 방법을 통해 스토리지에 액세스 할 수 있습니다.

  <code>actions/
  ├── game.js
  ├── score.js
  └── ...
  components/
  ├── router.js
  ├── pageControls.js
  ├── canvas.js
  └── ...
  constants/
  ├── game.js
  ├── score.js
  └── ...
  reducers/
  ├── game.js
  ├── score.js
  └── ...
  store/
  ├── configureStore.js
  ├── connect.js
  └── index.js
  utils/
  ├── serviceWorker.js
  ├── localStorage.js
  ├── dom.js
  └── ...
  index.js
  worker.js</code>

  구성 요소

  나는 두 가지 구성 요소를 사용하기로 결정했습니다 : 프리젠 테이션 계층 및 컨테이너 구성 요소 . 프리젠 테이션 구성 요소는 순수한 DOM 처리 만 수행합니다. 반면, 컨테이너 구성 요소는 작업을 예약하거나 변경 사항을 구독 할 수 있습니다.

  Dan Abramov는 React 구성 요소에 대한 훌륭한 기사를 작성했지만이 방법 세트는 다른 구성 요소 아키텍처에도 적용될 수 있습니다.

  그러나 나에게는 예외가 있습니다. 때로는 구성 요소가 매우 작고 한 가지만 수행합니다. 나는 그것들을 위의 패턴 중 하나로 나누고 싶지 않기 때문에 그것들을 혼합하기로 결정했습니다. 구성 요소가 자라서 더 많은 논리를 얻으면 분리하겠습니다. > 스크립트/구성 요소/pagecontrols.js

  위의 예는 구성 요소 중 하나입니다. 요소 목록 (이 경우 데이터 액션 속성이있는 모든 요소)이 있으며 속성 내용을 기반으로 클릭하면 작업을 일정으로 표시합니다. 그게 다야. 그런 다음 다른 모듈은 스토리지의 변경 사항을 듣고 그에 따라 스스로 업데이트 할 수 있습니다. 앞에서 언급했듯이 구성 요소에 DOM 업데이트가 있으면 분리하겠습니다.

  <code>layouts/
  └── default.html
  partials/
  ├── back-button.html
  └── meta.html
  pages/
  ├── about.html
  ├── settings.html
  └── ...
  index.html</code>

  이제이 두 구성 요소 유형의 명확한 분리를 보여 드리겠습니다.

  업데이트 DOM 프로젝트를 시작할 때 가장 큰 문제는 실제로 DOM을 업데이트하는 방법이었습니다. React는 DOM 업데이트를 최소화하기 위해 가상 DOM이라는 DOM의 빠른 메모리 표현을 사용합니다.

  나는 실제로 똑같은 일을하고 있다고 생각하고 있습니다. 내 응용 프로그램이 커지고 DOM이 더 지루하다면 가상 Dom으로 전환 할 수 있지만 지금은

  클래식 dom 작업을하고 있습니다. Redux와 잘 작동합니다. 기본 프로세스는 다음과 같습니다

  컨테이너 구성 요소의 새 인스턴스를 초기화하고 내부 사용을 위해 스토리지를 전달하십시오. 구성 요소 구독 스토리지 변경 및 다른 프리젠 테이션 레이어 구성 요소를 사용하여 DOM에서 업데이트를 렌더링합니다.
  참고 : JavaScript의 DOM과 관련된 모든 것에 대한 $ Symbol Prefix의 팬입니다. 당신이 추측 할 수 있듯이, 그것은 jQuery의 $에서 가져옵니다. 따라서 Pure Presentation 구성 요소 파일 이름은 달러 표시와 접두사입니다.
  /> scripts/index.js
<.> 여기서 멋진 것은 없습니다. 컨테이너 구성 요소 ScoreObserver 가져 오기, 생성 및 초기화. 정확히 무엇을합니까? 점수와 관련된 모든보기 요소 : 높은 점수 목록 및 게임 중 현재 점수 정보를 업데이트합니다.
• /> 스크립트/구성 요소/스코어 포브 서버/index.js
이것은 간단한 구성 요소입니다. 다른 구성 요소는 더 복잡한 논리와 다루어야 할 것입니다. 여기서 무슨 일이야? ScoreObserver 구성 요소는 스토리지에 대한 내부 참조를 저장하고 나중에 사용하기 위해 새 인스턴스의 두 가지 프레젠테이션 수준 구성 요소를 만듭니다. Init Method는 스토리지 업데이트에 가입하고 스토리지가 변경 될 때마다 $ 레이블 구성 요소를 업데이트하지만 게임이 실제로 실행중인 경우에만 업데이트됩니다.
• 업데이트 코어 보드 메서드는 다른 곳에서 사용됩니다. 어쨌든보기가 비활성이기 때문에 변경이 발생할 때마다 목록을 업데이트하는 것은 의미가 없습니다. 보기가 변경 될 때마다 다른 구성 요소를 업데이트하거나 비활성화하는 라우팅 구성 요소도 있습니다. API는 대략 다음과 같습니다
참고 : $ (및 $$)는 jQuery 참조가 아니라 문서화하기위한 편리한 유틸리티 바로 가기입니다.

> 스크립트/구성 요소/ScoreObserver/$ board.js

다시, 이것은 기본 예제이며 기본 구성 요소입니다. updateboard () 메소드는 배열을 가져 와서 반복하고 컨텐츠를 스코어 목록에 삽입합니다. > 스크립트/구성 요소/ScoreObserver/$ label.js 이 구성 요소는 위의 스코어 보드와 거의 동일하지만 단일 요소 만 업데이트합니다.

기타 오류 및 제안

또 다른 중요한 포인트는

사용 케이스 구동 스토리지를 구현하는 것입니다. 응용 프로그램에 필수적인 콘텐츠를 저장하는 것이 중요하다고 생각합니다. 처음에 나는 현재 활성보기, 게임 설정, 점수, 호버 효과,

<code>actions/
├── game.js
├── score.js
└── ...
components/
├── router.js
├── pageControls.js
├── canvas.js
└── ...
constants/
├── game.js
├── score.js
└── ...
reducers/
├── game.js
├── score.js
└── ...
store/
├── configureStore.js
├── connect.js
└── index.js
utils/
├── serviceWorker.js
├── localStorage.js
├── dom.js
└── ...
index.js
worker.js</code>

사용자의 호흡 모드 등 모든 것을 거의 저장했습니다.

이것은 한 응용 프로그램과 관련이있을 수 있지만 다른 응용 프로그램과 관련이 없습니다. 현재보기를 저장하고 다시로드시 같은 장소에서 계속하는 것이 좋을 수도 있지만, 제 경우에는 나쁜 사용자 경험과 유용한 것보다 더 성가신 느낌이 들었습니다. 메뉴 나 모달 스위치를 저장하고 싶지 않습니까? 사용자가 왜 특정 상태로 돌아 가야합니까? 더 큰 웹 응용 프로그램에서는 이것이 의미가있을 수 있습니다. 그러나 작은 모바일 게임 포커스 게임에서, 내가 거기에서 떠났기 때문에 설정 화면으로 돌아가서 꽤 성가신 일입니다.

결론

반응이 있거나없는 Redux 프로젝트를 수행했으며, 주요 테이크 아웃은 응용 프로그램 설계의 큰 차이가 필요하지 않다는 것입니다. React에 사용 된 대부분의 방법은 실제로 다른 뷰 처리 설정에 맞을 수 있습니다. 처음에는 다른 일을해야한다고 생각했기 때문에 이것을 깨닫는 데 시간이 걸렸지 만 결국 필요하지 않다는 것을 알게되었습니다. 그러나 다른 점은 모듈을 초기화하는 방법, 저장 방법 및 구성 요소가 전체 애플리케이션 상태를 얼마나 잘 이해하는지입니다. 개념은 동일하게 유지되지만 구현 및 코드 볼륨은 귀하의 요구에 적합합니다. Redux는 더 사려 깊은 방식으로 응용 프로그램을 구축하는 데 도움이되는 훌륭한 도구입니다. 보기 갤러리없이 혼자 사용하는 것은 처음에는 매우 까다로울 수 있지만, 일단 초기 혼란을 극복하면 아무것도 당신을 막을 수 없습니다.

내 방법에 대해 어떻게 생각하십니까? Redux와 다른 뷰를 사용하여 설정 만 처리하고 있습니까? 나는 당신의 의견을 듣고 의견에 대해 논의하고 싶습니다.

Redux에 대해 자세히 알아 보려면 "디자인 문제를 해결하기 위해 Redux를 다시 작성하고 테스트하는"코스를 확인하십시오. "미니 코스. 이 과정에서는 WebSocket 연결을 통해 주제별로 구성된 트윗을 수신하는 Redux 응용 프로그램을 작성합니다. 무슨 일이 일어날 지에 대한 아이디어를 얻으려면 아래의 무료 코스를 확인하십시오.

플레이어로드… 반응이없는 redux (FAQ)에서 FAQ

Redux와 React 사용과 React를 사용하지 않는 것의 주요 차이점은 무엇입니까?

Redux는 UI 계층과 함께 사용할 수있는 JavaScript 응용 프로그램을위한 예측 가능한 상태 컨테이너입니다. REDUX 대 REACT와 React를 사용하지 않는 것의 주요 차이점은 UI 계층이 Redux 저장소와 상호 작용하는 방법입니다. React와 함께 사용하면 Redux는 React의 구성 요소 기반 아키텍처와 수명주기 접근 방식을 활용하여 상태 변경이 이루어질 때 구성 요소의 업데이트를 자동으로 처리 할 수 ​​있습니다. React가 없으면 상태가 변경 될 때 스토리지를 수동으로 구독하고 UI에 대한 업데이트를 처리해야합니다. Redux에서 비동기 작업을 처리하는 방법은 무엇입니까? Redux의 비동기 작업은 일반적으로 Redux Thunk 또는 Redux Saga와 같은 미들웨어를 사용하여 처리됩니다. 이 미들웨어를 사용하면 일반적인 객체가 아닌 기능 (Thunks) 또는 더 복잡한 비동기 작업 (Sagas)을 예약 할 수 있습니다. React가 없어도 Redux Storage에서 이러한 미들웨어를 사용할 수 있습니다. Redux의 ApplyMiddleware 함수를 사용하여 스토리지를 작성할 때 미들웨어를 적용하면됩니다.

Redux DevTools를 React없이 사용할 수 있습니까?

예, Redux DevTools는 React에 의존하지 않으며 Redux를 사용하는 UI 레이어와 함께 사용할 수 있습니다. Redux 스토리지를 만들 때 미들웨어로 추가하여 Redux DevTools를 애플리케이션에 통합 할 수 있습니다. 이렇게하면 응용 프로그램의 상태와 조치를 반응없이 실시간으로 확인할 수 있습니다.

반응없이 UI 구성 요소의 Redux 스토리지에 연결하는 방법은 무엇입니까?

React 및 Connect 기능이 없으면 상태가 변경 될 때 Redux 스토리지를 수동으로 구독하고 UI 구성 요소를 업데이트해야합니다. STORE.SUBSCRIBE 메소드를 사용하여 상점을 구독 할 수 있으며, 이는 작업이 예약 될 때마다 호출되는 청취자 기능을 사용합니다. 이 리스너 기능에서는 store.getstate를 사용하여 스토리지의 현재 상태를 얻고 그에 따라 UI 구성 요소를 업데이트 할 수 있습니다.

vue 또는 angular와 같은 다른 라이브러리 또는 프레임 워크와 함께 redux를 사용할 수 있습니까?

예, Redux는 React에 의존하지 않으며 UI 층에 사용할 수 있습니다. VUE 및 Angular와 같은 다른 라이브러리 및 프레임 워크의 경우 React의 Connect 기능과 유사한 기능을 제공하는 바인딩이 제공됩니다. 이러한 바인딩을 사용하면 UI 구성 요소를 Redux 저장소에 쉽게 연결하고 상태가 변경 될 때 구성 요소의 업데이트를 처리 할 수 ​​있습니다.

React없이 Redux 코드를 테스트하는 방법은 무엇입니까?

REACT없이 레드 코드 테스트는 React로 테스트하는 것과 유사합니다. Jest 또는 Mocha와 같은 JavaScript 테스트 프레임 워크를 사용하여 액션 제작자 및 감속기에 대한 단위 테스트를 만들 수 있습니다. 비동기 작업을 테스트하기 위해 Mock Storage를 사용하여 Redux 스토리지를 시뮬레이션 할 수 있습니다.

Redux에서 부작용을 처리하는 방법은 무엇입니까?

Redux의 부작용은 일반적으로 Redux Thunk 또는 Redux Saga와 같은 미들웨어를 사용하여 처리됩니다. 이 미들웨어를 사용하면 API 호출과 같은 부작용 이상의 비동기 작업으로 기능을 예약 할 수 있습니다. React가 없어도 Redux Storage에서 이러한 미들웨어를 사용할 수 있습니다.

순수한 JavaScript와 함께 Redux를 사용할 수 있습니까?

예, Redux는 순수한 JavaScript와 함께 사용할 수 있습니다. Redux 상점을 만들고,이를 예약하고, 순수한 JavaScript 만 사용하여 상태의 변경 사항을 구독 할 수 있습니다. 그러나 REACT와 같은 라이브러리 나 프레임 워크가 없으면 UI에 대한 업데이트를 처리하기 위해 REACT가 없으면 상태가 변경 될 때 UI 구성 요소를 수동으로 업데이트해야합니다.

React없이 Redux 코드를 구축하는 방법은 무엇입니까?

Redux 코드의 구조는 RECT를 사용하는지 여부에 따라 다릅니다. 운영, 감속기 및 선택기를 다른 파일 또는 폴더로 분리하고 정규화되고 모듈 식 방식으로 상태를 구성하는 등 Redux 코드를 구축하기위한 동일한 모범 사례를 계속 따를 수 있습니다.

Redux 미들웨어를 React없이 사용할 수 있습니까?

예, Redux Middleware는 React에 의존하지 않으며 Redux를 사용하는 UI 레이어와 함께 사용할 수 있습니다. Redux의 미들웨어는 부작용 및 비동기 작업 등을 처리하는 데 사용됩니다. Redux의 ApplyMiddleware 함수를 사용하여 Redux 스토리지에 Redux의 미들웨어 적용을 사용할 수 있습니다.

위 내용은 React가없는 Redux의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!