Cómo agregar Redux Toolkit a su aplicación React Typecript

Para los desarrolladores de React que navegan por el ámbito de TypeScript, la incorporación de Redux Toolkit puede cambiar las reglas del juego en términos de gestión del estado. Redux Toolkit, un conjunto de utilidades diseñadas para mejorar la biblioteca Redux, permite a los desarrolladores escribir código más limpio y conciso manteniendo la solidez de sus aplicaciones. Este tutorial es una guía completa para agregar Redux Toolkit a su aplicación React TypeScript, ofrece información sobre los beneficios de aprovechar esta biblioteca y demuestra instrucciones paso a paso para integrarla perfectamente en su proyecto.

Este blog le ayudará a aprender el kit de herramientas de Redux con mecanografiado. Básicamente, utilicé el kit de herramientas redux para operaciones crudas.

Redux Toolkit es un paquete que proporciona a los desarrolladores un conjunto de utilidades para crear aplicaciones Redux. Está diseñado para simplificar y agilizar la experiencia de desarrollo al reducir el código repetitivo y brindar soporte listo para usar para casos de uso comunes de Redux.

Tabla de contenido

El kit de herramientas de Redux proporciona algunas opciones para configurar la tienda global y crear acciones y reductores de manera simplificada.

El kit de herramientas de Redux tiene las siguientes API:

  • configurarTienda(): configureStore se usa para crear una tienda Redux que incluye todo el middleware y las opciones de configuración que se usan comúnmente en una aplicación Redux, como redux-thunk, redux-dev tools-extension y soporte para el estado serializable. La función toma un objeto como argumento, que puede usarse para personalizar el comportamiento de la tienda.
  • crearReductor(): createReducer se puede definir como una función reductora de sectores utilizada para actualizar una parte específica del estado de la tienda Redux. Toma un objeto de estado inicial y un conjunto de funciones reductoras como argumentos y devuelve una nueva función reductora que puede manejar múltiples tipos de acciones y actualizar el estado en consecuencia.
  • crearAcción(): createAction es una función creadora de acciones que genera un objeto de acción cuando se llama. Toma una cadena que representa el tipo de acción como argumento y devuelve una función creadora de acciones que se puede utilizar para crear acciones de ese tipo.
  • crearAsyncThunk(): createAsyncThunk se puede definir como una función creadora de acciones asincrónicas que genera una o más acciones en respuesta a una operación asincrónica, como una solicitud de red. Se necesitan dos argumentos: una cadena que representa el prefijo de tipo para las acciones generadas y una función asincrónica que devuelve una Promesa.
  • crearEntityAdapter(): createEntityAdapter genera un conjunto de funciones reductoras y selectores para un tipo de entidad determinado basado en un esquema que define la forma de los datos normalizados. Los reductores generados incluyen funciones para agregar, actualizar y eliminar entidades y también manejan la creación de ID únicas para cada entidad.
  • crearSelector(): Al usar createSelector, puede definir un selector que dependa de uno o más selectores de entrada, y el resultado del selector solo se recalculará si uno de sus selectores de entrada cambia.

Requisito previo

  1. Conocimiento adecuado de la terminología de reacción: JSX, TSX, componentes de función y clase, estado, accesorios y ganchos.
  2. Familiaridad con la sintaxis y las características de ES6.
  3. Comprensión de los términos y conceptos de redux.
  4. Instale las últimas versiones de lo siguiente:
  • Reaccionar
  • Reaccionar-Dom
  • Reaccionar-Router-Dom
  • Mecanografiado
  • Para el estilo, utilicé el paquete Chakra-Ui. (También puede usar material UI, bootstrap o cualquier otro paquete para diseñar).
redux Kit de herramientas Redux
Requiere más código repetitivo para la configuración Reduce significativamente el código repetitivo
Configuración manual para middleware, potenciadores de tienda, etc. Configuración opinada con configureStore para una configuración de tienda simplificada
Requiere configuración explícita para Redux DevTools Configuración integrada de DevTools para mejorar las capacidades de depuración y viaje en el tiempo
El código puede ser detallado, lo que afecta la legibilidad Fomenta un código más conciso con patrones estructurados, mejorando la legibilidad del código.
Esto puede resultar en paquetes de mayor tamaño Optimizado para tamaños de paquetes más pequeños mediante importaciones selectivas y optimizaciones internas.
Requiere middleware para operaciones asíncronas Ofrece createAsyncThunk para manejar acciones asíncronas de una manera más estandarizada

Tecnologías utilizadas

  • Si la aplicación existe: npm install @reduxjs/toolkit –save
  • Crear nueva aplicación React:
  1. npx create-react-app my-app –template redux (para javascript).
  2. npx create-react-app my-app –template redux-typescript (para mecanografiado).

Paso 1: crea una tienda Redux.

import { configureStore } from '@reduxjs/toolkit';
import { bookSlice } from './bookSlice';

export const store = configureStore({
  reducer: {
    book: bookSlice.reducer,
  },
});

export type RootState = ReturnType<typeof store.getState>; 
export type AppDispatch = typeof store.dispatch;

Enlace del archivo fuente: https://github.com/kuldippanchal2000/redux_toolkit_with_typescript/blob/master/src/redux/store.ts

Paso 2: proporcione la Tienda Redux para reaccionar.

import { Provider } from "react-redux";
import { store } from "./redux/store";
<Provider store={store}>
 <App />
</Provider>

Enlace del archivo fuente:
https://github.com/kuldippanchal2000/redux_toolkit_with_typescript/blob/master/src/index.tsx

Paso 3: cree un segmento de estado y acciones de Redux.

import { createSlice } from "@reduxjs/toolkit";
import { RootState } from "./store";
import type { PayloadAction } from "@reduxjs/toolkit";
import { BookState } from "../types";

type initialStateType = {
  bookList: BookState[];
};
const bookList: BookState[] =
  JSON.parse(localStorage.getItem("userData") as string) ?? [];
const initialState: initialStateType = {
  bookList,
};
export const bookSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    addNewBook: (state, action: PayloadAction<BookState>) => {
      state.bookList?.push(action.payload);
    },
    updateBook: (state, action: PayloadAction<BookState>) => {
      const {
        payload: { title, id, author },
      } = action;

      state.bookList = state.bookList.map((book) =>
        book.id === id ? { ...book, author, title } : book
      );
      localStorage.setItem("userData", JSON.stringify(state.bookList));
    },
    deleteBook: (state, action: PayloadAction<{ id: string }>) => {
      const newArr = state.bookList.filter(
        (book) => book.id !== action.payload
      );
       localStorage.setItem("userData", JSON.stringify(newArr));
      state.bookList = newArr;
    },
  },
});
export const { addNewBook, updateBook, deleteBook } = bookSlice.actions;
export const selectBookList = (state: RootState) => state.book.bookList;
export default bookSlice.reducer;

Enlace del archivo fuente:
https://github.com/kuldippanchal2000/redux_toolkit_with_typescript/blob/master/src/redux/bookSlice.ts

Paso 4: agregue reductores de rebanadas a la tienda.

import { configureStore } from '@reduxjs/toolkit';
import { bookSlice } from './bookSlice';
export const store = configureStore({
  reducer: {
    book: bookSlice.reducer,
  },
});
export type RootState = ReturnType<typeof store.getState>; 
export type AppDispatch = typeof store.dispatch; 

Paso 5: utilice el estado y las acciones redux en los componentes de reacción.

import { addNewBook, updateBook,deleteBook } from "../redux/bookSlice";
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
const useAppDispatch = () => useDispatch<AppDispatch>();
const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

const dispatch = useAppDispatch();
dispatch(updateBook({ author, title, id: ids }));
dispatch(addNewBook(userData));
dispatch(addNewBook(userData));

Guía de desarrollo central (operación CRUD)

Para diseñar use chakra-UI (npm install –save @chakra-ui/react)
Utilice Enrutador, Rutas y Ruta desde (React-Router-Dom) para el enrutamiento en él.

Componentes

  • Loader.tsx (muestra el cargador cuando se representa el sitio).
  • Navbar.tsx (barra de navegación en la aplicación)

paginas

  • AddBook.tsx (página principal para operaciones crudas).
  • DeleteBookModel.tsx (página para el cuadro de diálogo de alerta de eliminación).

redux

  • Store.ts (tienda Redux)
  • BookSlice.ts (Parte de estado de Redux)

Cree un componente Loader para mostrar el cargador durante 2 segundos al renderizar.

Enlace del archivo fuente:
https://github.com/kuldippanchal2000/redux_toolkit_with_typescript/blob/master/src/components/Loader.tsx

crear componente de cargador

Crea una barra de navegación usando chakra-UI

import { Flex, Box, Text } from "@chakra-ui/react";
import { Link } from "react-router-dom";

const Navbar = () => {
  return (<Flex background="green.300" color="white"  fontSize="20"
      textDecoration="underline"
      display="flex"
      flexDirection="row"
      p={4}
    ><Box marginRight="10"><Link to="https://theonetechnologies.com/"><Text>Home</Text>    </Link></Box></Flex>
  );
};

export default Navbar;

Enlace del archivo fuente:
https://github.com/kuldippanchal2000/redux_toolkit_with_typescript/blob/master/src/components/NavBar.tsx

hogar

Cree el archivo AddBook.tsx para agregar, editar y eliminar funciones.

Enlace del archivo fuente:
https://github.com/kuldippanchal2000/redux_toolkit_with_typescript/blob/master/src/pages/AddBook.tsx

agregar

1. Agregar datos del libro

agregar datos del libro

2. Editar datos del libro

editar datos del libro

3. Eliminar datos del libro

Enlace del archivo fuente:
https://github.com/kuldippanchal2000/redux_toolkit_with_typescript/blob/master/src/pages/DeleteBookModel.tsx

eliminar datos del libro

Al enviar los botones agregar, editar y eliminar, los datos se almacenan en el almacenamiento local.

detalles del libro

Obtenga los datos del almacenamiento local y muéstrelos en la tabla de la interfaz de usuario de chakra

datos del almacenamiento local

Resultado final

salida final

Conclusión

La integración de Redux Toolkit en su aplicación React TypeScript es un movimiento estratégico para lograr una gestión del estado optimizada y una mayor eficiencia del desarrollo. Redux Toolkit no solo simplifica las complejidades de la gestión del estado, sino que también ofrece un enfoque modernizado para manejar operaciones asincrónicas, lo que lo convierte en una herramienta invaluable para los desarrolladores que buscan optimizar sus aplicaciones React TypeScript.

Después de seguir todos los pasos mencionados anteriormente, esperamos que su código funcione como se esperaba. Para facilitar aún más su tarea, hemos creado GitHub Repo en https://github.com/kuldippanchal2000/redux_toolkit_with_typescript. Puedes probar la aplicación de demostración en ejecución.

Preguntas frecuentes

¿Cómo puede ayudar su equipo a integrar Redux Toolkit en nuestra aplicación React TypeScript?

Nuestros desarrolladores experimentados se especializan en incorporar perfectamente Redux Toolkit en proyectos de React TypeScript, optimizar la gestión del estado y mejorar la eficiencia general de las aplicaciones.

¿Qué beneficios aporta la contratación de sus servicios para la integración de Redux Toolkit en una aplicación React TypeScript?

Al elegir nuestros servicios, obtiene acceso a la experiencia que garantiza un proceso de integración fluido, reduciendo el código repetitivo, mejorando la escalabilidad y aprovechando las potentes funciones de Redux Toolkit para una arquitectura de aplicaciones sólida.

¿Puede su equipo ayudar a migrar una configuración de Redux existente al Redux Toolkit en nuestra aplicación React TypeScript?

Ofrecemos servicios para realizar una transición fluida de su configuración actual de Redux a Redux Toolkit, minimizando las interrupciones y mejorando la capacidad de mantenimiento de su aplicación.

¿Puedo seguir usando mi código base de Redux existente al incorporar Redux Toolkit?

Redux Toolkit está diseñado para ser compatible con el código Redux existente, lo que permite una transición gradual y proporciona herramientas adicionales para mejorar su flujo de trabajo de desarrollo.

¿Cómo abordan sus desarrolladores los desafíos potenciales durante el proceso de integración de Redux Toolkit?

Nuestro equipo capacitado está equipado para solucionar cualquier desafío, ofreciendo soluciones proactivas para optimizar la integración y proporcionar una base sólida para su aplicación React TypeScript.

¿Puede adaptar la integración de Redux Toolkit a los requisitos específicos de nuestro proyecto y a las necesidades comerciales?

Nuestros servicios se pueden personalizar para satisfacer las demandas únicas de su proyecto, lo que garantiza que la integración de Redux Toolkit se alinee perfectamente con los objetivos de su aplicación React TypeScript.

¿Hay un impacto en el rendimiento al agregar Redux Toolkit a una aplicación React TypeScript?

Redux Toolkit está optimizado para paquetes de menor tamaño y sus importaciones selectivas garantizan que solo se incluyan las piezas necesarias, minimizando cualquier impacto potencial en el rendimiento.

sobre el autor

autor invitado Kuldip PanchalKuldip Panchal es un desarrollador junior de software nativo de reacción y reacción. Comenzó su carrera como aprendiz en The One Technologies – el mejor Empresa de desarrollo de ReactJs, en enero de 2022. Hasta ahora, su viaje ha sido bueno, desafiante y lleno de conocimientos. Le encanta encontrar soluciones a problemas complejos.

Jugar al kabaddi y al cricket son sus pasatiempos. Le encanta pasar tiempo con su familia y amigos. Su objetivo futuro es convertirse en director técnico de proyectos.


Source link

About David Lopez

Informático y experto en redes. Redactor en varios blogs tecnológicos desde hace 4 años y ahora en Steamachine.net

Check Also

Costo de desarrollo de aplicaciones Fintech: una guía completa

Las tecnologías emergentes como la IA generativa, las API o la cadena de bloques en …

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *