Like si tambien te encanta Redux Toolkit 💚
Conceptos claves para empezar
¿Ya tomaste el Curso Básico de Redux?
Conceptos claves de Redux
Ciclo de vida de Redux
Diferencias entre Redux y Context
Introducción a nuestro proyecto
Creemos una Pokedux
Iniciando nuestro proyecto
¡Atraparlos ya!
Introducción a PokeAPI
React.js + Redux
Integrando Redux
Hooks vs. Connect
Redux DevTools
Middlewares
Middlewares
Peticiones asíncronas
Redux Thunk
Middlewares alternativos: Redux Saga
Avanzando la ui
Agreguemos un loader
Agreguemos favoritos
Inmutabilidad
¿Qué es inmutabilidad?
Agregando Inmutabilidad a nuestra Pokedux
Avanzado
Cuándo usar reducers combinados
Redux Toolkit: creando nuestro primer Slice
Redux Toolkit: createAsyncThunk
Despedida del curso
Conclusiones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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.
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.
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.
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.
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
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.
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
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
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;
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?