Echa un vistazo a mi Slice a continuación
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 API = `${BASE_URL}/countrymap` const initialState = { mapdata:[], status: 'idle', error:null } export const fetchMapData = createAsyncThunk( 'mapdata/fetchMapData', async (id) => { try { const response = await axios.get( API, { headers: { 'Content-Type': 'application/json', 'X-API-KEY': KEY, }, params: { titleId: id, } } ) return response.data.Item; } catch (error) { console.error('API call error:', error.message); } } ) const mapSlice = createSlice({ name: 'mapdata', initialState, reducers:{ }, extraReducers(builder) { builder .addCase(fetchMapData.fulfilled, (state, action) => { state.status = 'succeeded' //This attempt to make it an array failed with the error // that the state is not iterable state.mapdata = [action.payload, ...state] console.log("map payload: ", state.mapdata); }) } }) // SELECTORS // This works for an array, but the data is originally coming // in as an object instead export const allMapData = (state, id) => state.mapdata.mapdata.find(item => item.title_id === id); export default mapSlice.reducercomo referencia, mire estos dos registros de consola de dos llamadas API diferentes a dos puntos finales diferentes de dos segmentos diferentes. Excepto que Media regresa como una matriz, y el mapa es un objeto
Necesito convertir state.mapdata en un objeto para poder usar el selector tal como está o volver a codificar el selector para que no use la función .find() porque es una función de matriz. Pero de cualquier manera, necesita comparar el titleId en los datos con el id en los parámetros
Lo siento por no proporcionar un código viable. Lo haría, pero hay una cantidad increíble de dependencias aquí.
Deberías usar
state.mapdata = [action.payload, ...state.mapdata]en vez de
state.mapdata = [action.payload, ...state]