我从json-server中获取了两种资源，分别是toys和books。所以我为这两种资源创建了一些种子数据，并创建了各自的类型文件。我有一个公共搜索栏。这意味着同时搜索toys和books，无论是否匹配。因为，最终用户会发布一个没有特定顺序的toys或books。所以，我分配了一个uuid（）- from react-uuid作为selectId（玩具或书籍的createEntityAdapter中的属性）。
请确认下面的代码-我的toySlice.ts文件

import { createAsyncThunk, createEntityAdapter, createSlice } from "@reduxjs/toolkit";
import uuid from "react-uuid";
import agent from "../../../../api/agent";
import { Toy } from "../../../../models/Toy";
import { RootState } from "../../../Redux/reduxStore";

interface JobState {
    status : string,
    loadedToys : boolean;
    searchTerm : string;
}

export const toysAdaptor = createEntityAdapter<Toy>({
    selectId : ( element ) => element.toyId = uuid() // when toyId is primary key - please focus here
});

// fetching list of toys
export const fetchToysAsync = createAsyncThunk<Job[], string>(
    'jobs/fetchToysAsync',
    async ( searchQuery, thunkAPI ) => {
     try {
        console.log(searchQuery, 'this reached thunk')
       return await agent.TOy.getToys(searchQuery);
        
     } catch ( error : any ) {
     return thunkAPI.rejectWithValue({ error : error.data });
     }}
);

export const toySlice = createSlice({
    name : 'toys',
    initialState : toysAdapter.getInitialState<ToyState>({
    status : 'idle',
    loadedToys : false,
    searchTerm : ''
    }),
    reducers : {
      setSearchTerm : ( state, action ) => {
        state.searchTerm = action.payload;
      },
    },
    extraReducers : (builder => {
        builder.addCase(fetchToysAsync.pending, ( state ) => {
            state.status = 'pending'
        });
        builder.addCase(fetchToysAsync.fulfilled, ( state, action ) => {
            jobsAdapter.setAll( state, action );
            state.loadedToys = true;
            state.status = 'idle'
        });
        builder.addCase(fetchToysAsync.rejected, ( state ) => {
            state.status = 'idle'
        });
    })
});

export const toySelector = toysAdapter.getSelectors((state : RootState ) => state.toys );
export const { setSearchTerm } = toySlice.actions;

同样，我的bookSlice如下-

import { createAsyncThunk, createEntityAdapter, createSlice } from "@reduxjs/toolkit";
    import uuid from "react-uuid";
    import agent from "../../../../api/agent";
    import { Book } from "../../../../models/Book";
    import { RootState } from "../../../Redux/reduxStore";
    
    interface BookState {
        status : string,
        loadedBooks : boolean;
        searchTerm : string;
    }
    
    export const bookAdapter = createEntityAdapter<Book>({
        selectId : ( element ) => element.bookId = uuid() // I am having error while setting the selectId to bookId -  please focus here
    });
    
    // fetching list of toys
    export const fetchBooksAsync = createAsyncThunk<Book[], string>(
        'jobs/fetchBooksAsync',
        async ( searchQuery, thunkAPI ) => {
         try {
            console.log(searchQuery, 'this reached thunk')
           return await agent.TOy.getToys(searchQuery);
            
         } catch ( error : any ) {
         return thunkAPI.rejectWithValue({ error : error.data });
         }}
    );
    
    export const toySlice = createSlice({
        name : 'books',
        initialState : booksAdapter.getInitialState<BookState>({
        status : 'idle',
        loadedBooks : false,
        searchTerm : ''
        }),
        reducers : {
          setSearchTerm : ( state, action ) => {
            state.searchTerm = action.payload;
          },
        },
        extraReducers : (builder => {
            builder.addCase(fetchBooksAsync.pending, ( state ) => {
                state.status = 'pending'
            });
            builder.addCase(fetchBooksAsync.fulfilled, ( state, action ) => {
                jobsAdapter.setAll( state, action );
                state.loadedBooks = true;
                state.status = 'idle'
            });
            builder.addCase(fetchBooksAsync.rejected, ( state ) => {
                state.status = 'idle'
            });
        })
    });
    
    export const bookSelector = toysAdapter.getSelectors((state : RootState ) => state.books );
    export const { setSearchTerm } = bookSlice.actions;

我的错误是-

bookSlice.ts:14 Uncaught (in promise) TypeError: Cannot add property bookId, object is not extensible
    at selectId (bookSlice.ts:14:1)
    at selectIdValue (utils.ts:4:1)
    at addOneMutably (unsorted_state_adapter.ts:24:1)
    at addManyMutably (unsorted_state_adapter.ts:41:1)
    at setAllMutably (unsorted_state_adapter.ts:72:1)
    at runMutator (state_adapter.ts:36:1)
    at Object.operation [as setAll] (state_adapter.ts:46:1)
    at bookSlice.ts:46:1
    at createReducer.ts:294:1
    at produce (immerClass.ts:94:1)

为什么我会收到这个错误？我应该只为玩具和书籍创建一个模态吗？比如说“post”...我问这个问题是因为，我只有一个搜索栏，用来过滤掉玩具列表和书籍列表，它们的数据形状几乎没有类似的属性。或者我应该使用两个模态，在上面的切片中，我有两个模态，正如你所看到的

Toy and Book

请给我建议，我该如何删除这个错误，让我的数据回到浏览器窗口？这是一个最佳的方式来获取不同的模态，这意味着要过滤，搜索只有一个搜索栏？
所有的建议和更正都是高度赞赏。