1

estoy creando un store con redux, aplicando el terminologia duck, que es unicamente hacer las acciones,constantes y mutaciones en el mismo fichero, por un tema de orden:

Tengo mi pokeDucks.js:

import axios from "axios";

//constantes
const dataInicial = {
    array:[]
}

const OBTENER_POKEMONES_EXITO = 'OBTENER_POKEMONES_EXITO';

//reducer
export default function pokeReducer(state = dataInicial,action){
    switch (action.type) {
        case OBTENER_POKEMONES_EXITO:
            return {
                ...state,array:action.payload
            }

        default:
            return state;
    }
}

//acciones
export const obtenerPokemonesAccion = () => async (dispatch,getState) =>{

    try {
        const res = await axios.get('https://pokeapi.co/api/v2/pokemon?offset=0&limit=20')
        dispatch({
            type:OBTENER_POKEMONES_EXITO,
            payload:res.data.results
        });

    } catch (error) {
        console.log('error al llamar obtenerPokemonesAccion');
    }
}

Y mi store.js:

import { combineReducers, compose } from "@reduxjs/toolkit";
import pokeReducer from "./pokeDucks";

//siempre se llama al reducer de los diferentes ficheroDucks.js
const rootReducer = combineReducers({
  pokemones: pokeReducer
});

//Para debugear redux en el explorador web: 
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

//Montamos el store que queremos devolver
const store = {
  reducer:rootReducer,
  middleware: (getDefaultMiddleware) =>{

  }
}

export default store;

Y mi index.js, que es donde llamo al store que he creado:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import store from './redux/store';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

El tema es que me esta dando este error al cargar el navegador :

ERROR
store.getState is not a function
./node_modules/react-redux/dist/react-redux.mjs/Provider/previousState<@http://localhost:3000/static/js/bundle.js:45304:51
mountMemo@http://localhost:3000/static/js/bundle.js:20779:23
useMemo@http://localhost:3000/static/js/bundle.js:21164:20
useMemo@http://localhost:3000/static/js/bundle.js:34914:25

Lo dejo tambien en imagen:

introducir la descripción de la imagen aquí

1 respuesta 1

1

Veo que te estas olvidando de createStore.

import { combineReducers, compose, createStore, applyMiddleware } from "@reduxjs/toolkit";
import pokeReducer from "./reducer";

const rootReducer = combineReducers({
    pokemones: pokeReducer
});

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const customMiddleWare = store => next => action => {
    next(action);
}

const store = createStore(rootReducer, applyMiddleware(customMiddleWare))

export default store;

Por otro lado, vas a observar que createStore esta despreciado. Veo que estas utilizando @reduxjs/toolkit pero estas utilizando funcionalidades de la libreria redux por lo que te invito a indagar acerca de:

createSlice (https://redux-toolkit.js.org/api/createSlice)

configureStore (https://redux-toolkit.js.org/api/configureStore)

Si quieres utilizar actions te invito a investigar acerca de:

createAsyncThunk (https://redux-toolkit.js.org/api/createAsyncThunk)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.