Redux Toolkit: creando nuestro primer Slice

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;