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: