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

Aportes 18

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

El curso ha sido revelador, pero a momentos confuso, pretendo hacer este
tutorial que de 0 se crea el proyecto con RTK

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

npm install @reduxjs/toolkit

Redux Toolkit es tan hermoso jajaja鈥

Like si te gusta como dicta la Profe el curso 鉂わ笍

Me sumo al amor por redux toolkit jajajaj

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

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

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;

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;