Instalación y Configuración de Redux Toolkit

Para comenzar a usar Redux Toolkit, es necesario instalarlo junto con las dependencias de React.

Ejecuta el siguiente comando en tu proyecto:

npm install @reduxjs/toolkit react-redux

Esto instala todo lo necesario para crear un store y conectarlo a la aplicación de React.

Configuración del Store

Crea un archivo nuevo para el store. Una ubicación común es:

src/store/store.js

Dentro de este archivo, crea el store utilizando configureStore:

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

export const store = configureStore({
  reducer: {}
});

En este punto, el store está vacío. Se agregarán los reducers en los próximos capítulos.

Conexión de Redux con React

Para que el store esté disponible en la aplicación, envuelve el componente raíz con Provider.

Abre el archivo principal de entrada (por ejemplo, main.jsx o index.js) y actualízalo de la siguiente manera:

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

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

Ahora el store de Redux está disponible en todos los componentes.