使用Redux Toolkit的createEntityAdapter创建动态数据网格

基础概念

Redux Toolkit 是 Redux 的官方工具集，旨在简化 Redux 的使用。createEntityAdapter 是 Redux Toolkit 中的一个函数，用于创建处理实体集合的适配器。这个适配器提供了一组预定义的 reducer 和 action creator，可以方便地管理实体的添加、更新、删除等操作。

类型

createEntityAdapter 返回一个包含以下部分的对象：

reducers: 包含 addOne, addMany, removeOne, removeMany, updateOne, updateMany, setAll 等 reducer。
selectors: 用于获取实体集合的状态，如 selectEntities, selectAll, selectTotal 等。
actions: 用于创建实体的 action creator，如 addOne, addMany, removeOne 等。

应用场景

适用于需要管理大量实体数据的应用，例如：

管理用户列表
管理商品列表
管理订单列表

示例代码

以下是一个使用 createEntityAdapter 创建动态数据网格的示例：

import { createSlice, configureStore } from '@reduxjs/toolkit';
import { createEntityAdapter } from '@reduxjs/toolkit';

// 创建实体适配器
const usersAdapter = createEntityAdapter();

// 创建切片
const userSlice = createSlice({
  name: 'users',
  initialState: usersAdapter.getInitialState(),
  reducers: {
    addUser: usersAdapter.addOne,
    removeUser: usersAdapter.removeOne,
    updateUser: usersAdapter.updateOne,
  },
});

// 创建 store
const store = configureStore({
  reducer: userSlice.reducer,
});

// 使用 action creator
store.dispatch(userSlice.actions.addUser({ id: 1, name: 'Alice' }));
store.dispatch(userSlice.actions.updateUser({ id: 1, name: 'Bob' }));
store.dispatch(userSlice.actions.removeUser(1));

// 使用 selector 获取数据
const users = usersAdapter.getSelectors(store.getState()).selectAll;
console.log(users);