Reemplazo de módulo caliente en Redux

Este es un ejemplo mínimo de reemplazo de módulo en caliente (o HMR) en una aplicación Redux. El código de demostración en funcionamiento está alojado en GitHub. Solo incluimos las configuraciones esenciales para admitir HMR, lo que facilita la aplicación de HMR en su propia aplicación Redux.

Si no puede esperar para aplicar HMR, salte a esta sección para configurar HMR para su proyecto en cinco minutos.

Ejecute el ejemplo

¡Ensúciate las manos primero! Antes de ejecutar los comandos para iniciar esta aplicación de ejemplo, asegúrese de que Git, Node.js e Yarn estén instalados correctamente en su máquina.

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

Luego visite http://localhost:3000/ para ver si funciona.

Al escribir su código, el reemplazo del módulo activo puede actualizar la página sin una actualización completa. Más importante aún, el estado Redux se mantiene mientras que otros recursos se han actualizado en su lugar.

Reemplazo de módulo caliente

El reemplazo de módulos en caliente es una de las características más útiles que ofrece Webpack. Permite que todo tipo de módulos, incluidos los archivos JSON, CSS y JS, se actualicen en tiempo de ejecución sin necesidad de una actualización completa.

Así es como funciona internamente:

1. La aplicación le pide al tiempo de ejecución de HMR que busque actualizaciones.
2. El tiempo de ejecución descarga de forma asíncrona las actualizaciones y notifica a la aplicación.
3. Luego, la aplicación le pide al tiempo de ejecución que aplique las actualizaciones.
4. El tiempo de ejecución aplica las actualizaciones de forma síncrona.

HMR aumenta la productividad al desarrollar una aplicación Redux. Redux es un contenedor de estado predecible para aplicaciones de JavaScript. Es un marco de trabajo de última generación muy popular basado en React. Redux, por definición del primer principio de Redux, es un almacén de datos compartido singular, descrito por su documentación como una "Fuente única de verdad". El almacén de datos (un objeto de JavaScript simple actualizado por reducers ) se actualizará a medida que el usuario opere en la aplicación. Cada operación del usuario, como hacer clic en un botón, cargar datos de back-end, etc., probablemente actualizará la tienda varias veces. No es fácil corregir un error cuando ocurre solo con una instantánea particular del estado.

HMR nos permite actualizar la página sin reiniciar la tienda global. Durante el desarrollo de Redux, es posible que queramos inspeccionar la tienda después de una serie de operaciones. Un escenario muy común es que se produce un error solo después de haber agregado un artículo en particular (quizás complejo) a la tienda. Sin HMR, tenemos que hacer los siguientes pasos:

1. Modifique el código que potencialmente causa el error.
2. Actualice la página, agregue el artículo en particular a la tienda.
3. Si los errores persisten, repita el paso 1.

La iteración anterior se repetirá una y otra vez si el error es difícil de encontrar. En el mundo real, el error solo puede aparecer después de más operaciones. HMR nos ayuda a compilar y aplicar el código modificado manteniendo el valor actual de la tienda sin cambios. No necesitamos repetir el Paso 2. Aumenta la eficiencia del desarrollo.

Característica en este ejemplo

Queremos mantener la característica mínima, solo para demostrar la capacidad de HMR. Entonces, en esta aplicación, no incorporamos funciones comunes en una aplicación React, incluidos redux-logger, react-router-redux, redux-thunk, redux-devtools, etc. Mientras tanto, mantenemos solo un reductor, dos acciones y 1 página.

Nuestra aplicación mantiene solo un valor de contador en la tienda. Solo tenemos una página llamada inicio , que muestra el valor del contador y dos botones para aumentar/disminuir el valor del contador.

Para confirmar que HMR funciona, simplemente aumente o disminuya el contador varias veces y luego modifique algún código. Por ejemplo, modifique el título Mostrador a Mostrador en tienda . Entonces encontraremos que:

• La página no se actualiza.
• El valor del contador mostrado NO SE CAMBIA.
• El título se ha cambiado a Mostrador en la tienda .

‍ Configure HMR en cinco minutos

Para configurar HMR, siga estos pasos.

Bibliotecas esenciales

Estas bibliotecas deben instalarse para admitir HMR:

• react-hot-loader@^4.2.0: Compile y actualice la aplicación React en tiempo real.
• webpack-dev-server@^3.1.4: Sirve una aplicación Webpack. Actualiza el navegador en los cambios.

ES6

Si está utilizando ECMAScript6 (¿Quién no lo está haciendo en estos días?), necesita más herramientas para compilar ES6 en tiempo real. Primero, este es el archivo de configuración mínimo de ES6 .babelrc:

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

Para admitir la compilación en tiempo real, se necesita esta biblioteca:

• babel-preestablecido-reaccionar-hmre@^1.1.1

Webpack.config.js

Necesitamos configurar HMR en el archivo de configuración de Webpack webpack.config.js.

En primer lugar, habilite el complemento HMR en la sección de complementos:

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

El complemento HMR genera un Manifiesto, un archivo JSON que enumera los módulos actualizados, y una Actualización, un archivo JSON que contiene los datos que se aplicarán. Lo que debe tenerse en cuenta es que HMR es una opción proporcionada por Webpack. Los cargadores como style-loader, que implementan la interfaz HMR, reciben una actualización a través de HMR y luego reemplazan el código anterior con el código nuevo.

Si estamos usando webpack-dev-server, entonces debemos activar el indicador activo en la sección devServer:

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

Recarga en caliente los reductores Redux

A partir de la versión 2.0.0 de Redux, los reductores no se recargan en caliente implícitamente porque la recarga en caliente implícita causa algunos problemas. Si su estado Redux se restablece a los valores iniciales cuando se actualiza en caliente, intente habilitar la actualización en caliente para los reductores:

 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; }

Ajustes avanzados

Para obtener configuraciones más avanzadas de HMR, consulte la API de HMR.

Correr

Finalmente, ejecute la aplicación con:

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

Solución de problemas

HMR simplemente no aplica los cambios

HMR puede fallar silenciosamente sin ninguna advertencia. Cuando actualiza el código y lo guarda, la página simplemente no se actualiza en absoluto. Probablemente esto se deba a que su sistema no le permite ver tantos cambios de archivos.

En Ubuntu, puede ejecutar sysctl -a | grep inotify sysctl -a | grep inotify para ver el valor actual user.max_inotify_watches . Intente aumentar este número ejecutando: sudo sysctl fs.inotify.max_user_watches=524288 . Alternativamente, agregue una nueva línea fs.inotify.max_user_watches=524288 al archivo sudo vim /etc/sysctl.conf y luego ejecute sudo sysctl -p /etc/sysctl.conf para aplicar el cambio.