Propósito del kit de herramientas de Redux

Ya sabemos que redux es una poderosa biblioteca de administración de estado para nuestras aplicaciones JavaScript, especialmente cuando trabajamos con React.
Pero trabajar con redux es difícil debido a la gran cantidad de código para configurar redux. Lo que dificulta el mantenimiento y la depuración. Ahí es donde Redux Toolkit viene a ayudar.
Problemas que resuelve el kit de herramientas Redux

• La configuración de la tienda es demasiado complicada.
• Agregar muchos paquetes para trabajar con redux, por ejemplo, middleware y herramientas.
• Redux necesita demasiado código para configurarse

El kit de herramientas Redux es la forma oficial y recomendada de escribir lógica redux. Proporciona un conjunto de herramientas para simplificar el desarrollo y reducir el código repetitivo que ayuda a crear aplicaciones escalables y fáciles de mantener.

Beneficios clave de Redux Toolkit:

1. Menos código repetitivo: elimina la necesidad de constantes y creadores de acciones.
2. Configuración de tienda simplificada: proporciona una única API para configurar la tienda con valores predeterminados razonables.
3. Soporte integrado para inmutabilidad y DevTools: habilita automáticamente Redux DevTools y se integra con Immer para inmutabilidad.
4. Mejor compatibilidad con TypeScript: proporciona mejores mecanografías y se integra bien con TypeScript.

Podemos usar el kit de herramientas redux con cualquier biblioteca de javascript, por lo que configuramos el kit de herramientas redux con reaccionar.

Configuración de Redux Toolkit en una aplicación React

Paso 1: Crear un nuevo proyecto de React

Primero, creemos una nueva aplicación React. Puedes usar create-react-app o Vite para este propósito. Usaremos create-react-app aquí para simplificar.

npx create-react-app redux-toolkit-example
cd redux-toolkit-example

Paso 2: Instalar Redux Toolkit y React-Redux

A continuación, instale los paquetes necesarios: @reduxjs/toolkit y react-redux.

npm install @reduxjs/toolkit react-redux

1. Comprensión de las rebanadas y los reductores

Un segmento es una colección de lógica y acciones del reductor Redux para una característica específica de su aplicación. Redux Toolkit proporciona la función createSlice para ayudar a crear una porción de estado con un texto repetitivo mínimo.

Paso 1: Crear un sector
Creemos un segmento de contador simple. Cree un nuevo archivo llamado counterSlice.js dentro de un directorio de características/contador:

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value  = 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value  = action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

Aquí, definimos un segmento llamado contador con un estado inicial y tres reductores (incremento, decremento e incrementoByAmount). La función createSlice genera automáticamente creadores de acciones para cada función reductora.

1. Configurando la Tienda Redux

Ahora que tenemos nuestra porción, configuremos la tienda Redux. Redux Toolkit proporciona una función configureStore que configura la tienda con buenos valores predeterminados.

Paso 1: Crear una tienda
Cree un archivo store.js dentro del directorio de una aplicación:

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Paso 2: Proporciona la tienda a tu aplicación
Envuelva su aplicación React en un componente de react-redux y páselo a la tienda. Actualice el archivo index.js:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './app/store';

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById('root')
);

1. Conectar componentes a la tienda

Para interactuar con la tienda Redux, use los ganchos useSelector y useDispatch proporcionados por react-redux.
Paso 1: Acceda al estado con useSelector
Utilice el gancho useSelector para acceder al estado desde la tienda

// src/features/counter/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

const Counter = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    

      
{count}
       dispatch(increment())}>Increment
       dispatch(decrement())}>Decrement
       dispatch(incrementByAmount(5))}>Increment by 5
    
  );
};

export default Counter;

Paso 2: Utilice el componente contador en su aplicación
Importe y use el componente Contador en su componente principal de la aplicación:

// src/App.js
import React from 'react';
import Counter from './features/counter/Counter';

function App() {
  return (
    

      
    
  );
}

export default App;

1. Conclusión y próximos pasos

En esta parte, cubrimos los conceptos básicos de la configuración de Redux Toolkit en una aplicación React, incluida la creación de sectores, la configuración de la tienda y la conexión de componentes a la tienda Redux mediante ganchos. En la siguiente parte, profundizaremos en el manejo de la lógica asincrónica con createAsyncThunk para recuperar datos de las API y administrar diferentes estados de carga.

¡Estén atentos a la Parte 2: Kit de herramientas avanzado de Redux: lógica asíncrona con createAsyncThunk!