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:

terminalnpm 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:

app/store.jsimport { configureStore } from '@reduxjs/toolkit'

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

app/store.jsexport 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:

main.jsximport 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:

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

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

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

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

App.jsxfunction 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 :).