Redux의 핫 모듈 교체

게시 됨: 2022-03-11

이것은 Redux 애플리케이션에서 핫 모듈 교체(또는 HMR)의 최소 예입니다. 작동하는 데모 코드는 GitHub에서 호스팅됩니다. HMR을 지원하는 데 필수적인 설정만 포함하므로 자체 Redux 애플리케이션에 HMR을 쉽게 적용할 수 있습니다.

HMR 적용을 기다릴 수 없다면 이 섹션으로 이동하여 5분 이내에 프로젝트에 HMR을 설정하십시오!

핫 모듈 교체 시연

예제 실행

먼저 손을 더럽혀라! 이 예제 애플리케이션을 시작하는 명령을 실행하기 전에 Git, Node.js 및 Yarn이 컴퓨터에 올바르게 설치되어 있는지 확인하십시오.

 $ git clone https://github.com/Front-end-io/articles.git $ cd articles && git checkout redux-hmr $ yarn install $ yarn start

그런 다음 http://localhost:3000/을 방문하여 작동하는지 확인하십시오.

코드를 작성할 때 핫 모듈 교체는 전체 새로 고침 없이 페이지를 업데이트할 수 있습니다. 더 중요한 것은 Redux 상태가 유지되고 다른 리소스가 제자리에 업데이트된다는 것입니다.

핫 모듈 교체

핫 모듈 교체는 Webpack이 제공하는 가장 유용한 기능 중 하나입니다. JSON, CSS 및 JS 파일을 포함한 모든 종류의 모듈을 전체 새로 고침 없이 런타임에 업데이트할 수 있습니다.

내부적으로 작동하는 방식은 다음과 같습니다.

  1. 애플리케이션은 HMR 런타임에 업데이트를 확인하도록 요청합니다.
  2. 런타임은 업데이트를 비동기식으로 다운로드하고 애플리케이션에 알립니다.
  3. 그런 다음 애플리케이션은 업데이트를 적용하도록 런타임에 요청합니다.
  4. 런타임은 업데이트를 동기식으로 적용합니다.

핫 모듈 교체 다이어그램

HMR은 Redux 애플리케이션을 개발할 때 생산성을 높입니다. Redux는 JavaScript 앱을 위한 예측 가능한 상태 컨테이너입니다. React를 기반으로 하는 매우 인기 있는 최신 프레임워크입니다. Redux의 첫 번째 원칙에 따라 Redux는 단일 공유 데이터 저장소로 설명서에 "단일 소스 소스"로 설명되어 있습니다. 데이터 저장소( reducers 에 의해 업데이트된 일반 JavaScript 객체)는 사용자가 애플리케이션에서 작업할 때 업데이트됩니다. 버튼 클릭, 백엔드 데이터 로드 등과 같은 모든 사용자 작업은 스토어를 여러 번 업데이트할 가능성이 높습니다. 특정 상태의 스냅샷에서만 버그가 발생하면 버그를 수정하기가 쉽지 않습니다.

HMR을 사용하면 글로벌 스토어를 다시 초기화하지 않고도 페이지를 업데이트할 수 있습니다. Redux 개발 중에 일련의 작업 후에 저장소를 검사할 수 있습니다. 매우 일반적인 시나리오는 특정(복잡할 수 있음) 항목을 상점에 추가한 후에만 버그가 발생한다는 것입니다. HMR이 없으면 다음 단계를 수행해야 합니다.

  1. 잠재적으로 버그를 일으킬 수 있는 코드를 수정합니다.
  2. 페이지를 새로 고치고 특정 항목을 상점에 추가하십시오.
  3. 버그가 지속되면 1단계를 반복합니다.

버그를 찾기 어려운 경우 위의 반복이 계속 반복됩니다. 현실 세계에서 버그는 더 많은 작업 후에만 나타날 수 있습니다. HMR은 현재 저장소 값을 변경하지 않고 유지하면서 수정된 코드를 컴파일하고 적용하는 데 도움이 됩니다. 2단계를 반복할 필요가 없습니다. 개발 효율성을 높입니다.

버그를 수정한다고 해서 HMR을 사용하여 애플리케이션을 다시 시작해야 하는 것은 아닙니다.

참고: 경우에 따라 코드 수정이 현재 저장소 값에 영향을 줄 수 있습니다. 이 경우 HMR은 전체 페이지를 다시 로드하도록 경고합니다.

이 예의 기능

HMR 기능을 보여주기 위해 기능을 최소화하고 싶습니다. 따라서 이 애플리케이션에서는 redux-logger, react-router-redux, redux-thunk, redux-devtools 등을 포함한 React 애플리케이션의 일반적인 기능을 통합하지 않습니다. 한편, 우리는 하나의 리듀서, 두 개의 작업 및 1개의 작업만 유지합니다. 페이지.

우리의 응용 프로그램은 상점에서 카운터 값만 유지합니다. 카운터 값을 표시하는 home 이라는 페이지와 카운터 값을 늘리거나 줄이는 두 개의 버튼만 있습니다.

HMR이 작동하는지 확인하려면 카운터를 여러 번 늘리거나 줄인 다음 일부 코드를 수정하면 됩니다. 예를 들어 Counter in store 라는 제목을 Counter 로 수정합니다. 그러면 다음을 찾을 수 있습니다.

  • 페이지가 새로 고쳐지지 않습니다.
  • 표시된 카운터 값은 변경되지 않습니다.
  • 제목이 카운터 인 스토어 로 변경되었습니다.

‍ 5분 만에 HMR 설정

HMR을 설정하려면 다음 단계를 따르세요.

필수 라이브러리

HMR을 지원하려면 다음 라이브러리를 설치해야 합니다.

  • react-hot-loader@^4.2.0: React 애플리케이션을 실시간으로 컴파일하고 업데이트합니다.
  • webpack-dev-server@^3.1.4: Webpack 앱을 제공합니다. 변경 사항에 따라 브라우저를 업데이트합니다.

ES6

ECMAScript6을 사용하고 있다면(요즘은 그렇지 않은가?) ES6을 실시간으로 컴파일하려면 몇 가지 도구가 더 필요합니다. 먼저 이것은 최소 ES6 구성 파일 .babelrc입니다.

 { "env": { "development": { "presets": [ "react-hmre" ] } } }

실시간 컴파일을 지원하려면 다음 라이브러리가 필요합니다.

  • babel-preset-react-hmre@^1.1.1

웹팩.config.js

Webpack 구성 파일 webpack.config.js에서 HMR을 구성해야 합니다.

먼저 플러그인 섹션에서 HMR 플러그인을 활성화합니다.

 "plugins": [ … new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin(), ]

HMR 플러그인은 업데이트된 모듈을 나열하는 JSON 파일인 Manifest와 적용할 데이터가 포함된 JSON 파일인 Update를 생성합니다. 주의할 점은 HMR은 Webpack에서 제공하는 옵션입니다. HMR 인터페이스를 구현하는 style-loader와 같은 로더는 HMR을 통해 업데이트를 수신한 다음 이전 코드를 새 코드로 교체합니다.

webpack-dev-server를 사용하는 경우 devServer 섹션에서 핫 플래그를 켜야 합니다.

 "devServer": [ ... hot: true, ]

Redux 감속기 핫 리로드

Redux 버전 2.0.0부터는 암시적 핫 리로딩이 몇 가지 문제를 일으키기 때문에 리듀서가 암시적으로 핫 리로드되지 않습니다. 핫 업데이트 시 Redux 상태가 초기 값으로 재설정되면 리듀서에 대한 핫 업데이트를 활성화해 보세요.

 import { createStore } from 'redux'; import rootReducer from '../reducers/index'; export default function configureStore(initialState) { const store = createStore(rootReducer, initialState); if (module.hot) { // Enable Webpack hot module replacement for reducers module.hot.accept('../reducers', () => { const nextRootReducer = require('../reducers/index'); store.replaceReducer(nextRootReducer); }); } return store; }

고급 설정

HMR의 고급 설정은 HMR API를 참고하세요.

달리다

마지막으로 다음을 사용하여 응용 프로그램을 실행하십시오.

 $ ./node_modules/.bin/webpack-dashboard -- webpack-dev-server

문제 해결

HMR은 단순히 변경 사항을 적용하지 않습니다

HMR은 경고 없이 자동으로 실패할 수 있습니다. 코드를 업데이트하고 저장하면 페이지가 전혀 업데이트되지 않습니다. 이는 시스템에서 많은 파일 변경 사항을 볼 수 없기 때문일 수 있습니다.

Ubuntu에서는 sysctl -a | grep inotify sysctl -a | grep inotify 는 현재 user.max_inotify_watches 값을 봅니다. 다음을 실행하여 이 수를 늘리십시오. sudo sysctl fs.inotify.max_user_watches=524288 . 또는 sudo vim /etc/sysctl.conf 파일에 fs.inotify.max_user_watches=524288 줄을 새로 추가한 다음 sudo sysctl -p /etc/sysctl.conf 를 실행하여 변경 사항을 적용합니다.