No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Redux Toolkit: creando nuestro primer Slice

20/22
Recursos

¿Cómo Simplificar el Uso de Redux con Redux Toolkit?

Aprender a manejar Redux puede ser un desafío debido a la cantidad de código boilerplate involucrado y la inclinada curva de aprendizaje al inicio. No obstante, Redux Toolkit surge como una solución efectiva para optimizar la experiencia del desarrollador, simplificando considerablemente el proceso. Con herramientas como Immer para inmutabilidad y los Slices para gestionar los reducers, Redux Toolkit se presenta como una manera más eficiente de manejar el estado en tus aplicaciones.

¿Cómo Instalar Redux Toolkit?

Para empezar a utilizar Redux Toolkit, lo primero es instalar el paquete. Puedes hacerlo utilizando npm:

npm install @reduxjs/toolkit

Una vez instalado, se recomienda crear una nueva carpeta llamada Slices o Features dentro de tu carpeta src para organizar mejor tus Slices y features. Esta separación ayuda a mantener un código más claro.

¿Qué es un Slice y Cómo Se Crea?

Un Slice en Redux Toolkit es un concepto que abstrae la creación de reducers, action types y action creators. Para crearlo, importa el método createSlice:

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

A continuación, crea una variable que exportarás, utilizando createSlice para definir nombre, estado inicial y reducers. Aquí un ejemplo de cómo crear un Slice llamado dataSlice:

const dataSlice = createSlice({
  name: 'data',
  initialState: {
    pokemons: []
  },
  reducers: {
    setPokemons(state, action) {
      state.pokemons = action.payload;
    },
    setFavorite(state, action) {
      const currentIndex = state.pokemons.findIndex(pokemon => pokemon.id === action.payload.id);
      if (currentIndex >= 0) {
        state.pokemons[currentIndex].favorite = !state.pokemons[currentIndex].favorite;
      }
    }
  }
});

export const { setPokemons, setFavorite } = dataSlice.actions;
export default dataSlice.reducer;

En el ejemplo anterior, setPokemons y setFavorite son funciones que gestionan los cambios de estado.

¿Cómo Exportar Acciones y Reducers?

Para poder usar las acciones y el reducer que has definido en tu dataSlice, deberás exportarlos al final del archivo:

export const { setPokemons, setFavorite } = dataSlice.actions;
export default dataSlice.reducer;

Esto permite que las acciones sean importadas en los componentes donde quieras interactuar con el estado global, y que el reducer se combine con otros si fuera necesario.

¿Cómo Configurar el RootReducer?

Cambia el RootReducer usando el combinarReducer del mismo Redux. Importa el reducer que has definido en el dataSlice y combínalo:

import { combineReducers } from 'redux';
import dataReducer from './slices/dataSlice';

const rootReducer = combineReducers({
  data: dataReducer,
  // otros reducers
});

export default rootReducer;

Con estos pasos, la transición a Redux Toolkit es mucho más sencilla y te permite concentrarte más en la lógica de negocio en lugar de en la infraestructura de Redux.

¿Qué Ventajas Ofrece Redux Toolkit?

  • Código Reducido: Se eliminan muchas partes repetitivas de código.
  • Gestión de Inmutabilidad: El uso de Immer permite gestionar cambios de estado de manera más intuitiva.
  • Curva de Aprendizaje Menos Pronunciada: Facilita la comprensión y uso de Redux desde el primer momento.
  • Integración de Thunks: Permite manejar asincronismo sin la necesidad de paquetes adicionales como redux-thunk.

Adoptando Redux Toolkit, optimizarás tus procesos de desarrollo, y te centrarás más en la creación de aplicaciones robustas y escalables. ¡No dudes en explorar más funcionalidades de Redux Toolkit para seguir optimizando tus proyectos!

Aportes 18

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Like si tambien te encanta Redux Toolkit 💚

Para los que usan y tienen instalado el pluggin de VSCode
ES7+ React/Redux/React-Native snippets

existe un snippets que te da un template para los slices

rxslice

Saludos 👋

Redux toolkit es genial
Aca tienes el enlace a la documentación oficial:
https://redux-toolkit.js.org/tutorials/quick-start

Yo amo Redux Toolkit. Lo uso react-query y es lo mas.

npm install @reduxjs/toolkit

Like si te gusta como dicta la Profe el curso ❤️

Redux Toolkit es tan hermoso jajaja…

Me sumo al amor por redux toolkit jajajaj

Creo que se ha facilitado mucho el código con Redux-toolkit.

Crear un Slice con redux-toolkit

primero se instala redux-toolkit

npm i @reduxjs/toolkit

creamos carpeta Slice/dataSlice.jsx

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  pokemons: [],
  loading: true,
};
export const dataSlice = createSlice({
  name: "data",
  initialState,
  reducers: {
    setPokemons: (state, action) => {
      state.pokemons = action.payload;
      state.loading=false
    },
    setFavorite: (state, action) => {
      const indexPkmn = state.pokemons.findIndex(
        (pkmn) => pkmn.id == action.payload.id
      );
      if (indexPkmn >= 0) {
        state.pokemons[indexPkmn].isFavorite = !state.pokemons[indexPkmn].isFavorite;
      }
    },
  },
});

export const {setFavorite,setPokemons}= dataSlice.actions
console.log('dataSlice.actions: ', dataSlice.actions);
//exportamos por default los reducer del objeto dataSlice para integrarlos en la
//raiz que integra todos nuestros reducers 
export default dataSlice.reducer

ahora pasaremos a pasar nustro slice a la raiz de nuestros reducer

rootReducer.jsx

import {combineReducers} from 'redux';
import { uiReducer } from './iu';
import { pokemonsReducer } from './pokemons';
import dataReducer from '../slices/dataSlice'; 
//como estamos utilicemmos la libreria de immutable, para 
// user reducer combinados, necesitamos instalar redux-immutable
const rootReducer= combineReducers({
    data:dataReducer
    // ui: uiReducer
})
export default rootReducer;

redux-toolkit es amor

Caramba!! Ahora sí se entiende que pidan redux en varios puestos, como en paypal, aunque para ser empresas extranjeras en latam pagan muy poco, aunque puede que yo malinterpretara la moneda en la que pagan, en caso de que se pague en dólares si que vale la pena aprender redux a fondo y redux toolkit lo facilita mucho.

Me parece que dataSlice no tiene un atributo llamado actions, solo vi el name, initialState y los reducers

Yo ando viendo el curso porque se me habia perdido cuando salió, en ese proceso ví redux toolkit de one y cuando vine a este solo me preguntaba porque tanto boilerplat, si esto lo monté fácil

**English version branch & commit** <https://github.com/SebaMat3/Pokedux/tree/feat/redux-toolkit-migration> **Branch name** feat/redux-toolkit-migration **Commit message** "feat: Migrate to Redux Toolkit for state management This commit migrates the application's state management from Redux with ImmutableJS to Redux Toolkit. Implemented the first slice 'src/slices/dataSlice.js' to manage pokemon data."

Mejor usando la funcion map:

state.pokemons = state.pokemons.map((pokemon) => {
    if (pokemon.id === action.payload.pokemonId) {
        pokemon.favorite = !pokemon.favorite;
        return pokemon;
    }
    return pokemon
});

Convención de los types:
nombre_slice/nombre_action_creator
.
Esto lo hace RTK por defecto, sin embargo es bueno saberlo

Dejo mi dataSilice con TS:

import { createSlice } from "@reduxjs/toolkit";
import { PokemonDetailType } from "../api";

type InitialState = {
    pokemons: PokemonDetailType[]
}

const initialState: InitialState = {
    pokemons: []
}

export const dataSlice = createSlice({
    name: 'data',
    initialState,
    reducers:{
        setPokemons: (state,action)=>{
            state.pokemons = action.payload
        },
        setFavorite: (state, action)=>{
            const currentPokemonIndex = state.pokemons.findIndex(
                (pkmn:PokemonDetailType) => {
                    return pkmn.id  === action.payload.pokemonId
                }
            )
            if(currentPokemonIndex >= 0){
                const isFavorite = state.pokemons[currentPokemonIndex].favorite
                state.pokemons[currentPokemonIndex].favorite = !isFavorite
            }
        }
    }
})

export const { setPokemons, setFavorite } = dataSlice.actions;