Creación de Store Redux para la aplicación ✌

Paso número 2.

Teniendo todos los archivos creados, procedemos a Crear la Store Redux.👊

Lo primero a crear serán las acciones que podremos realizar en nuestra Store. En el archivo actions.js copiaremos el siguiente código.

actions.js

//import del archivo
import Axios from "axios"

// Type Actions

// Games Store
export const BuyPokemon = "BUYPOKEMON"
export const ReturnPokemon = "RETURNPOKEMON"

// Type Async Action
export const FetchPokemonRequest = "FETCHPOKEMONREQUEST"
export const FetchPokemonSuccess = "FETCHPOKEMONSUCCESS"
export const FetchPokemonFailure = "FETCHPOKEMONFAILURE"

Con estas líneas se crearon los tipos de acciones que podremos realizar en nuestra Store, ahora crearemos las acciones.

actions.js

// Actions

export const BuyPokemonActions = (cant) => {
    return {
        type: BuyPokemon,
        payload: cant,
    }
}

export const ReturnPokemonActions = (cant) => {
    return {
        type: ReturnPokemon,
        payload: cant
    }
}

// Async Actions
export const FetchPokemonRequestAction = () => {
    return {
        type: FetchPokemonRequest,

    }
}
export const FetchPokemonSuccessAction = (pokemon) => {
    return {
        type: FetchPokemonSuccess,
        payload: pokemon

    }
}
export const FetchPokemonFailureAction = (error) => {
    return {
        type: FetchPokemonFailure,
        payload: error

    }
}
export const fetchPokemonAction = (valor) => {
    return (dispatch) => {
        dispatch(FetchPokemonRequestAction());
        Axios.get(`https://pokeapi.co/api/v2/pokemon/${valor}`)
            .then(response => {
                dispatch(FetchPokemonSuccessAction([response.data]))
            })
            .catch(error => {
                dispatch(FetchPokemonFailureAction("No se encontro el pokemon"))
            })
    }
}

Tenemos 3 tipos de acciones, BuyPokemon que permite comprar un juego de pokemon de la tienda, ReturnPokemon que permite devolver un juego de pokemon a la tienda y fetchPokemon que hacer una petición Rest a "pokeapi" para buscar un pokemon en especifico.

Ahora que tenemos las acciones que podemos realizar en nuestra Store, crearemos a nuestros trabajares o Reducers que son los encargados de realizar las acciones en el Store.

reducers.js

import { BuyPokemon, FetchPokemonFailure, FetchPokemonRequest, FetchPokemonSuccess, ReturnPokemon} from "./actions";
import { defaultGamesState, initialStateSearch } from "./store";

// Reducer

export const gamesReducer = (state = defaultGamesState, action) => {
    switch (action.type) {
        case BuyPokemon: {
            return {
                ...state,
                pokemon: state.pokemon - action.payload
            }
        }
        case ReturnPokemon:
            return {
                ...state,
                pokemon: state.pokemon + action.payload
            }
        default: return state;
    }
}

export const SearchReducer = (state = initialStateSearch, action) => {
    switch (action.type) {
        case FetchPokemonRequest:
            return {
                ...state,
                loading: true
            }
        case FetchPokemonSuccess:
            return {
                loading: false,
                pokemon: action.payload,
                error: ''
            }
        case FetchPokemonFailure:
            return {
                loading: false,
                pokemon: [],
                error: action.payload
            }
        default: return state;
    }
}

Tenemos dos Reducers, gamesReducer que es el encargado de realizar las acciones BuyPokemon y ReturnPokemon, SearchReducer es el encargado de realizar las acciones para la petición a la API.

Ya con los Reducers podemos crear la Store Redux

store.js

//importar composeWithDevTools si se hizo el paso opcional numero 6
import { composeWithDevTools } from 'redux-devtools-extension'

import { createStore, combineReducers, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import {gamesReducer, SearchReducer } from './reducer'

// DefaultState
export const defaultGamesState = {
    pokemon: 10,
}
export const initialStateSearch = {
    loading: false,
    pokemon: [],
    error: ''
}

// Store
const rootReducers = combineReducers({
    games: gamesReducer,
    seeker: SearchReducer
})

// copiar esta linea si se tiene redux devtools instalado
const store = createStore(rootReducers, composeWithDevTools(
    applyMiddleware(thunk)
))

// copiar esta linea si no se instalo redux devtools
const store = createStore(rootReducers, applyMiddleware(thunk)
)

export default store;

Con esto, hemos creado la Store para almacenar los datos necesarios para el funcionamiento correcto de la aplicación.