Instalación de Redux y RTK en una aplicación React

En esta sesión instalaremos en nuestra aplicación el paquete React-Redux, que permite a los componentes React trabajar en conjunto con Redux y la herramienta Redux Toolkit (abreviado RTK).

Abrimos nuestro proyecto y escribimos en la terminal el siguiente comando:

npm install @reduxjs/toolkit react-redux

Ahora necesitamos crear el almacén store, donde se almacenará el estado global de nuestra aplicación. Para empezar, en la carpeta src crearemos una carpeta app, y dentro de ella el archivo store.js. Luego, en este archivo necesitamos importar configureStore desde RTK:

import { configureStore } from '@reduxjs/toolkit'

A continuación crearemos un store vacío y le pasaremos al menos un reducer:

export default configureStore({
	reducer: {}
});

Para que nuestros componentes React puedan trabajar con el store, haremos lo siguiente. Iremos a nuestro archivo main.jsx, en el cual ya tenemos el código:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
)

En la importación añadiremos líneas con el store creado en el paso anterior y el componente Provider:

import store from './app/store'
import { Provider } from 'react-redux'

Luego envolveremos nuestro componente principal App en Provider, y le pasaremos como prop el store:

<React.StrictMode>
	<Provider store={store}>
		<App />
	</Provider>
</React.StrictMode>

Y, finalmente, en el componente principal React App colocaremos el siguiente código:

function App() {
	return <h2>This is my first Redux app!</h2>
}

export default App

Ejecutamos nuevamente nuestro proyecto y vemos en la ventana del navegador: 'This is my first Redux app!'. Por ahora no hacemos caso a la advertencia sobre la ausencia de un reductor válido. Lo has logrado, felicidades :).

Instala en tu aplicación Redux y RTK, como se describe en la lección. Asegúrate de que tu aplicación funcione.