Gatsby + Redux es una combinación poderosa a la hora de crear aplicaciones web estáticas con funciones dinámicas. Con Gatsby 2, nunca ha sido tan fácil ponerse en marcha. Hoy, lo guiaré a través de los pasos necesarios.
¿No eres un gran fanático de la lectura? ? Dirígete al motor de arranque Redux de inmediato:
https://github.com/caki0915/gatsby-redux-test/
o use la CLI de Gatsby:
npx gatsby new gatsby-redux-test //github.com/caki0915/gatsby-redux-test/¿Qué es Gatsby?
Gatsby es uno de los generadores de sitios estáticos más populares que existen. Preconfigurado con Webpack, React y GraphQL, le brinda una gran ventaja al crear aplicaciones web. También viene con un rico ecosistema de complementos que facilita la conexión a una variedad de fuentes de datos. Lea más sobre Gatsby en su sitio web.
¿Qué es Redux?
Redux es un contenedor de estado que se usa a menudo junto con las aplicaciones React. Este artículo asumirá que ya sabe cómo funciona Redux. Si es nuevo en Redux o necesita un resumen, encontrará más información en su sitio web.
? ¡Vamonos! ?
Empiece por crear un nuevo proyecto de Gatsby. En la terminal, ejecute: (Reemplace gatsby-redux-test con un nombre de su elección)
npx gatsby new gatsby-redux-test && cd gatsby-redux-testEl siguiente paso es instalar reduxy react-reduxpaquetes de NGP.
npm install --save redux react-redux
Muy bien, ¡agreguemos un estado!
Cree una nueva carpeta llamada statedentro de su srccarpeta y cree un archivo app.js. Por el bien de este tutorial, vamos a agregar una característica simple que le permite activar y desactivar una variable " darkMode" .
Primero, agregue el estado inicial:
const initialState = { isDarkMode: false, };Agregue el creador de acciones (para activar y desactivar el modo oscuro ):
const TOGGLE_DARKMODE = 'TOGGLE_DARKMODE'; export const toggleDarkMode = isDarkMode => ({ type: TOGGLE_DARKMODE, isDarkMode });Agregue el reductor:
export default (state = initialState, action) => { switch (action.type) { case TOGGLE_DARKMODE: return { ...state, isDarkMode: action.isDarkMode }; default: return state; } };
¡Vale genial! Ahora, agreguemos el reductor de raíces. Crea un nuevo archivo index.jsdentro de la statecarpeta.
import { combineReducers } from 'redux'; import app from './app'; export default combineReducers({ app });
Ahora vamos a crear una tienda y un proveedor. Crea un nuevo archivo ReduxWrapper.jsen la statecarpeta. Este componente va a envolver nuestro componente raíz en Gatsby.
import React from 'react'; import { Provider } from 'react-redux'; import { createStore as reduxCreateStore } from 'redux'; import rootReducer from '.'; const createStore = () => reduxCreateStore(rootReducer); export default ({ element }) => ( {element} );
Gatsby renderizará nuestra aplicación tanto en el servidor como en el navegador, y por suerte para nosotros, Gatsby tiene una API muy flexible que nos permite conectarnos con la renderización. ? Podemos implementar los ganchos de dos archivos: gatsby-browser.jsy gatsby-ssr.js.
El gancho que nos interesa se llama wrapRootElement y le permite envolver su aplicación con un elemento personalizado. Exactamente lo que necesitamos para nuestro proveedor de Redux. ? Puede leer más sobre wrapRootElement en la documentación.
Como queremos exportar nuestro ReduxWrapper como wrapRootElement de ambos gatsby-browser.jsy gatsby-ssr.js, agregue esta línea a ambos archivos:
export { default as wrapRootElement } from './src/state/ReduxWrapper';
OK hecho. ¡Gatsby y Redux ahora están trabajando juntos! ? Ahora solo necesitamos una forma de probarlo.
Vamos a buscar la forma más fácil que se me ocurre: Un botón en la página de inicio donde se puede activar y desactivar el modo oscuro . Cuando darkMode está activado , el botón estará oscuro con texto blanco.
En la terminal ejecutar:
npm run developY ... ¡mira el tema oscuro en acción!
Ok, tal vez eso no fue tan impresionante, pero el ejemplo hace su trabajo y estoy seguro de que encontrarás una aplicación mucho mejor para Redux en tu aplicación Gatsby. ?
Resumen
Gatsby + Redux es una combinación poderosa si desea crear aplicaciones web estáticas con funciones dinámicas. También lo uso para mis proyectos. Si encuentra útil este artículo, agregue un comentario y un enlace a su increíble aplicación Gatsby / Redux. ? ?
