Redux Toolkit es la forma oficial y recomendada de escribir lógica de Redux. Proporciona buenos valores predeterminados para la configuración de la tienda desde el primer momento e incluye integrados los complementos de Redux más utilizados. En este blog, analizaremos los conceptos básicos de la integración de Redux Toolkit con una aplicación React.

¿Qué es el kit de herramientas Redux?

Redux Toolkit es un conjunto de herramientas que ayuda a simplificar el proceso de escritura de la lógica de Redux. Incluye utilidades para simplificar casos de uso comunes como la configuración de la tienda, la creación de reductores y la escritura de una lógica de actualización inmutable.

Configurando el kit de herramientas Redux con React

Repasemos los pasos para configurar Redux Toolkit en una aplicación React.

Paso 1: instalar dependencias

Primero, necesitas instalar los paquetes necesarios. Puedes hacer esto usando npm o hilo.

npm install @reduxjs/toolkit react-redux

Paso 2: crea una tienda Redux

La tienda es el objeto que da vida a Redux. Con Redux Toolkit, puedes crear una tienda usando la función configureStore.

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

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

export default store;

Paso 3: crea una porción

Un segmento es una colección de lógica y acciones del reductor Redux para una única característica de su aplicación. La función createSlice de Redux Toolkit genera creadores de acciones y tipos de acciones automáticamente.

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

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

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

export default counterSlice.reducer;

Paso 4: proporcione la tienda a su aplicación React

Para que la tienda Redux esté disponible para sus componentes de React, debe usar el componente Proveedor de react-redux.

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

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

Paso 5: conecte los componentes de React a la tienda Redux

Para conectar un componente de React a la tienda Redux, puede usar los ganchos useSelector y useDispatch de react-redux.

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

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

  return (
    

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

export default Counter;

Paso 6: use el componente conectado en su aplicación

Finalmente, puedes usar el componente conectado en tu aplicación.

// src/App.js
import Counter from './components/Counter';

function App() {
  return (
    

      
    
  );
}

export default App;

Conclusión

Al seguir estos pasos, puede configurar Redux Toolkit en su aplicación React para administrar el estado de una manera predecible y mantenible. Redux Toolkit simplifica muchas de las tareas comunes cuando se trabaja con Redux, lo que facilita la escritura y el mantenimiento de la lógica de Redux.

Exploración adicional

Para aquellos que quieran profundizar en Redux Toolkit y React, aquí hay algunos recursos valiosos:

• Documentación del kit de herramientas de Redux: la documentación oficial proporciona guías completas y referencias de API.
  • Documentación del kit de herramientas de Redux
• Documentación de React Redux: Obtenga más información sobre cómo usar Redux con React.
  • Documentación de React Redux
• Tutorial de conceptos básicos de Redux: un tutorial paso a paso para que puedas empezar a utilizar Redux Toolkit.
  • Tutorial básico de Redux
• Tutorial de fundamentos de Redux: un tutorial detallado que cubre los conceptos básicos de Redux.
  • Tutorial de fundamentos de Redux

¡Gracias por leer!
Correos.