说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？

// 入口 src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import store from './store'
import { Provider } from 'react-redux'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

// src/store/dic.js
import { createSlice } from '@reduxjs/toolkit'
import baseApi from '../api/base'
// 使用createSlice方法创建一个slice。每一个slice里面包含了reducer和actions，实现模块化的封装
export const counterSlice = createSlice({
  // 命名空间
  name: 'dic',
  // state数据的初始值
  initialState: {
    sortList: [
      { label: '食品类', value: '食品类' },
      { label: '服装类', value: '服装类' },
      { label: '日用品类', value: '日用品类' },
    ]
  },
  // 定义的action。由于内置了immutable插件，可以直接使用赋值的方式进行数据的改变
  reducers: {
    changeVal: (state, action) => {
      // 第一个参数 state为当前state中的数据
      // 第二个参数 action为 {payload: [{ label: '家具类', value: '家具类' }], type: "dic/changeVal"}
      // payload 为传过来的新参数值
      // type 为action触发类型
      console.log('changeVal:', JSON.parse(JSON.stringify(state)), state, action)
      state.sortList = action.payload
    }
  },
})
export const { changeVal } = counterSlice.actions
export default counterSlice.reducer

// src/store/index.js
import { configureStore } from '@reduxjs/toolkit'
import dic from './dic'
export default configureStore({
  reducer: {
    dic,
  },
})

// src/views/Goods.jsx
import { useSelector, useDispatch } from 'react-redux'
import { changeVal } from '@/store/dic'
function Goods (props) {
  const dispatch = useDispatch()
  // 使用state中的数据
  const sortList = useSelector((state) => state.dic.sortList)
  useEffect(() => {
    // 触发store中action以更新数据
    dispatch(changeVal([{ label: '家具类', value: '家具类' }]))
  }, [])
  return (
    <div>
      渲染数据：
      <ul>
        {
          sortList.map(el => (
            <li key={el.value}>{el.label}</li>
          ))
        }
      </ul>
    </div>
  )
}
export default Goods

// src/store/dic.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import baseApi from '../api/base'
export const loadGoods = createAsyncThunk(
  'dic/fetchGoods',
  (data, thunkAPI) => {
    // thunkAPI：一个对象，其中包含通常传递给 Redux thunk 函数的所有参数，以及其他选项(参考：https://redux-toolkit.js.org/api/createAsyncThunk#payloadcreator)
    baseApi.findGoods(data).then(res => {
      thunkAPI.dispatch(setGoods(res.result))
    })
  }
)
export const counterSlice = createSlice({
  name: 'dic',
  initialState: {
    goodsData: [],
  },
  reducers: {
    setGoods: (state, action) => {
      state.goodsData = action.payload
    }
  },
})
export const { setGoods } = counterSlice.actions
export default counterSlice.reducer

// src/store/dic.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import baseApi from '../api/base'
export const loadGoods2 = createAsyncThunk(
  'dic/fetchGoods2',
  (data, thunkAPI) => {
    return baseApi.findGoods(data).then(res => res.result)
  }
)
export const counterSlice = createSlice({
  name: 'dic',
  initialState: {
    goodsData: [],
  },
  reducers: {},
  extraReducers: {
    // 异步函数成功fulfilled时回调(类似的还有pending等待、rejected拒绝，此处只列举成功态) 
    [loadGoods2.fulfilled](state, action) {
      state.goodsData = action.payload
    },
  }
})
// export const { } = counterSlice.actions
export default counterSlice.reducer

// src/views/Goods.jsx
// 省略其它代码...
useEffect(() => {
  dispatch(loadGoods({ name: '香蕉' }))
  dispatch(loadGoods2({ name: '橘子' }))
}, [])
// 省略其它代码...