Entiendo que esto se ha preguntado antes, pero hasta ahora no hay respuestas, excepto que alguien haya cometido un error de sintaxis. He verificado esto con todos los tutoriales que he visto en línea y no puedo encontrar el problema. Parece provenir del extraReducer completo.
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; import axios from "axios"; const KEY = process.env.REACT_APP_API_KEY const BASE_URL = process.env.REACT_APP_BASE_URL const GLOBALVIEWS_API = `${BASE_URL}/countrymap` const initialState = { mapdata:{}, status: 'idle', //'idle', 'loading', 'succeeded', 'failed' error:null } export const fetchMapData = createAsyncThunk( 'mapdata/fetchMapData', async (id) => { const response = await axios.get( GLOBALVIEWS_API, { headers: { 'Content-Type': 'application/json', 'X-API-KEY': KEY, }, params: { titleId: id, } } ) return response.data.Item; } ) const mapSlice = createSlice({ name: 'mapdata', initialState, reducers:{ addMapData: (state, { payload }) => { state.mapdata = payload } }, extraReducers: { [fetchMapData.pending]: () => { console.log("Pending"); }, [fetchMapData.fulfilled]: (state, { payload }) => { state.status = 'succeeded' console.log("Succeeded", payload); return {...state, mapdata: payload} }, [fetchMapData.rejected]: () => { console.log("Rejected"); }, } }) // SELECTORS export const getMapStatus = (state) => state.mapdata.status; export const allMapData = (state) => state.mapdata.mapdata; export const { addMapData } = mapSlice.actions; export default mapSlice.reducerEn el componente, nada raro, y sí, todo es importado.
const {id} = useParams(); const dispatch = useDispatch(); const allmapdata = useSelector(allMapData) const addmapdata = useSelector(addMapData) const mapStatus = useSelector(getMapStatus) useEffect(() => { dispatch(fetchMapData(id)) lazy(setMap(allmapdata)) console.clear() console.log("mapdata: ", allmapdata); }, [id, allmapdata, dispatch])Puede ver en mi imagen a continuación que mi búsqueda es exitosa y estoy obteniendo datos. Entonces, ¿cómo me deshago de este error? Gracias por adelantado.
Este es el problema:
state.status = 'succeeded' console.log("Succeeded", payload); return {...state, mapdata: payload} De hecho, eso es tanto una "mutación del state existente" como un "retorno de un nuevo valor", y eso es exactamente lo que le advierte el error.
Puedes cambiar eso a:
state.status = 'succeeded' state.mapdata = action.payload