使用Redux-Toolkit，由“object is not extensible”引发的思考及解决方案

问题重述

​ 最近在做一个数据浏览平台，如图所示

​ 大致的编码逻辑是左上角的数据集选择器，控制全局UI的改变。比如左部的树形控件数据，画布中的节点链接图等等，都是根据当前所选的数据集来定的。这种组件间的状态复用，自然而然就想到把数据集作为一个状态来交给redux管理。

使用redux-toolkit

​ 好的，现在开始查redux官方文档。因为刚学会react，教程中redux的store中使用的是createStore()创建的，但是这个方法目前已经弃用了，官方建议使用的是configureStore()。经过一番文档的查阅，开始使用createSlice()来重写reducer。

使用createSlice()

​ 这里直接贴上我这部分slice的错误代码

• 创建slice

//  redux/optionSlice.js
import {
    createSlice } from "@reduxjs/toolkit";
import {
    dataSets } from "../utils/getData";
import {
    HIGHLIGHT } from "./constant";


export const optionSlice = createSlice({
   
    name: 'option',
    initialState: {
   
        data: dataSets["case1"],
        mode: HIGHLIGHT
    },
    reducers: {
   
      	//这里对于state的解释在下文
        changedata: ((state, action) => {
   
            state.data = action.payload
        }),
        changemode: ((state, action) => {
   
            state.mode = action.payload
        })
    }
})

export const {
    changedata, changemode } = optionSlice.actions
export default optionSlice.reducer

slice有两个导出，一个是在内部负责操作状态的action；一个是reducer

我还有一另外一个selectionSlice负责管理其他的状态，这里考虑到篇幅就不给出了。

在index.js中融合两个silce

//   redux/index.js
import optionReducer from './optionSlice';   //注意，这里引入的是slice中导出的reducer，slice有两个导出：reducer和action
import selectionReducer from "./selectionSlice"

export const reducers = {
   
    option: optionReducer,
    selection: selectionReducer
}

在store.js配置store，并使用<Provider store={store}>让所有组件都可以使用redux中管理的状态

• 配置store

// redux/store.js
import {
    configureStore } from '@reduxjs/toolkit'
import {
    reducers } from './index';

export const store = configureStore(
    {
   
        reducer: reducers,//这里内置了combineReducer
    }
);

• 添加Provider

​ 在App标签外部套上<Provider>标签

import {
    createRoot } from 'react-dom/client'
import App from './App'
import {
    BrowserRouter } from "react-router-dom";
import {
    Provider } from 'react-redux';
import {
    store } from './redux/store'

createRoot(document.getElementById('root')).render(
        <Provider store={
   store}>
            <App />
        </Provider>
)

绘制节点链接图

​ 用户选择一份数据集，就会把这份数据集交给redux管理，在其他组件中如果想要取用数据集，使用useSelector(state => state.option.data)即可取用。问题就发生在这一步

​ 我先简述一下我的代码：

// componnets/Canvas/index.jsx

export