当数据是对象而不是数组时，如何通过 Redux Toolkit 中的 ID 参数连接到我的状态？

Question

看看下面我的切片

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.reducer

作为参考，请查看来自两个不同 API 对来自两个不同切片的两个不同端点的两个不同端点的两个控制台日志。除了 Media 以数组形式返回，而 map 是一个对象

我需要将 state.mapdata 变成一个对象，以便我可以按原样使用选择器，或者重新编码选择器，使其不使用 .find() 函数因为那是一个数组函数。但是无论哪种方式，它都需要将数据中的titleId与params

中的id进行比较

很抱歉没有提供可行的代码。我愿意，但这里有大量的依赖项

Answer 1

你应该使用

state.mapdata = [action.payload, ...state.mapdata]

而不是

state.mapdata = [action.payload, ...state]

当数据是对象而不是数组时，如何通过 Redux Toolkit 中的 ID 参数连接到我的状态？

How do I connect to my state by ID params in Redux Toolkit when the data is an object not an array?

javascript

reactjs

react-redux

redux-toolkit