Ir al contenido principal
Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Inicio rápido de Redux Toolkit

Qué aprenderás
  • Cómo configurar y usar Redux Toolkit con React-Redux
Requisitos previos

Introducción​

¡Bienvenido al tutorial de inicio rápido de Redux Toolkit! Este tutorial te introducirá brevemente a Redux Toolkit y te enseñará cómo comenzar a usarlo correctamente.

Cómo leer este tutorial​

Esta página se centrará exclusivamente en cómo configurar una aplicación Redux con Redux Toolkit y las principales APIs que utilizarás. Para explicaciones sobre qué es Redux, cómo funciona y ejemplos completos de cómo usar Redux Toolkit, consulta los tutoriales vinculados en la página "Índice de tutoriales".

Para este tutorial, asumimos que estás usando Redux Toolkit con React, pero también puedes usarlo con otras capas de interfaz. Los ejemplos se basan en una estructura de carpetas típica de Create-React-App donde todo el código de la aplicación está en una carpeta src, pero los patrones pueden adaptarse a cualquier configuración de proyecto o carpetas que estés utilizando.

La plantilla Redux+JS para Create-React-App incluye esta misma configuración de proyecto predefinida.

Resumen de uso​

Instalar Redux Toolkit y React-Redux​

Añade los paquetes de Redux Toolkit y React-Redux a tu proyecto:

npm install @reduxjs/toolkit react-redux

Crear un almacén de Redux​

Crea un archivo llamado src/app/store.js. Importa la API configureStore de Redux Toolkit. Comenzaremos creando un almacén de Redux vacío y exportándolo:

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

export default configureStore({
  reducer: {}
})

Esto crea un almacén de Redux, y también configura automáticamente la extensión Redux DevTools para que puedas inspeccionar el almacén durante el desarrollo.

Proporcionar el almacén de Redux a React​

Una vez creado el almacén, podemos ponerlo a disposición de nuestros componentes React envolviendo nuestra aplicación en un <Provider> de React-Redux en src/index.js. Importa el almacén de Redux que acabamos de crear, envuelve tu <App> con <Provider> y pasa el almacén como prop:

index.js
import React from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App'
import store from './app/store'
import { Provider } from 'react-redux'

const root = createRoot(document.getElementById('root')!)

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
)

Crear un slice de estado de Redux​

Añade un nuevo archivo llamado src/features/counter/counterSlice.js. En ese archivo, importa la API createSlice de Redux Toolkit.

Crear un slice requiere un nombre de tipo string para identificarlo, un valor de estado inicial y una o más funciones reductoras que definan cómo se puede actualizar el estado. Una vez creado el slice, podemos exportar los creadores de acciones de Redux generados y la función reductora para todo el slice.

Redux requiere que escribamos todas las actualizaciones de estado de forma inmutable, haciendo copias de los datos y actualizando las copias. Sin embargo, las APIs createSlice y createReducer de Redux Toolkit usan Immer internamente para permitirnos escribir lógica de actualización "mutante" que se convierte en actualizaciones inmutables correctas.

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

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment: state => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: state => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

Añadir los reductores de slice al almacén​

A continuación, debemos importar la función reductora desde el segmento del contador y añadirla a nuestro store. Al definir un campo dentro del parámetro reducer, indicamos al store que utilice esta función reductora de segmento para manejar todas las actualizaciones de ese estado.

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

export default configureStore({
  reducer: {
    counter: counterReducer
  }
})

Utilizar el estado y las acciones de Redux en componentes de React​

Ahora podemos usar los hooks de React-Redux para que los componentes de React interactúen con el store de Redux. Podemos leer datos del store con useSelector y despachar acciones usando useDispatch. Crea un archivo src/features/counter/Counter.js con un componente <Counter> dentro, luego importa ese componente en App.js y renderízalo dentro de <App>.

features/counter/Counter.js
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
import styles from './Counter.module.css'

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

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

Ahora, cada vez que hagas clic en los botones "Incrementar" y "Decrementar":

  • La acción de Redux correspondiente se despachará al store

  • El reductor del segmento del contador detectará las acciones y actualizará su estado

  • El componente <Counter> recibirá el nuevo valor de estado desde el store y se volverá a renderizar con los nuevos datos

Lo que has aprendido​

Esto ha sido un resumen rápido de cómo configurar y usar Redux Toolkit con React. Recapitulando los detalles:

Resumen
  • Crea un store de Redux con configureStore
    • configureStore acepta una función reducer como argumento nombrado
    • configureStore configura automáticamente el store con ajustes predeterminados óptimos
  • Provee el store de Redux a los componentes de la aplicación React
    • Envuelve tu <App /> con el componente <Provider> de React-Redux
    • Pasa el store de Redux como <Provider store={store}>
  • Crea un reductor de "segmento" de Redux con createSlice
    • Llama a createSlice con un nombre de cadena, un estado inicial y funciones reductoras nombradas
    • Las funciones reductoras pueden "mutar" el estado usando Immer
    • Exporta el reductor de segmento generado y los creadores de acciones
  • Usa los hooks useSelector/useDispatch de React-Redux en componentes React
    • Lee datos del store con el hook useSelector
    • Obtén la función dispatch con el hook useDispatch, y despacha acciones según sea necesario

Ejemplo completo de la aplicación de contador​

Aquí tienes la aplicación completa del contador como un CodeSandbox en funcionamiento:

¿Qué sigue?​

Recomendamos seguir el tutorial completo "Redux Essentials", que cubre todas las piezas clave incluidas en Redux Toolkit, qué problemas resuelven y cómo usarlas para construir aplicaciones del mundo real.

También puedes leer el tutorial "Redux Fundamentals", que te dará una comprensión completa de cómo funciona Redux, qué hace Redux Toolkit y cómo usarlo correctamente.