createEntityAdapter使用

参考官方文档

使用场景

管理比较多的数据,包括增删改查。

一般情况下,前端处理数据列表会使用数组格式,例如:

js 复制代码
    //数组格式的数据列表
    const list = [
        {id:1,age:'20',name:'A'},
        {id:2,age:'22',name:'B'},
        ...+100
    ]

如果数据量很大,CURD操作时就会比较繁琐,性能较低。例如修改id为2的数据,每次修改需要遍历数组找到对应的数据后再进行修改。

createEntityAdapter的作用

createEntityAdapter是redux-toolkit提供的一个api,用来简化上述场景的操作。 将数组列表修改为便于操作的数据格式:

js 复制代码
    {  
        // id数组
        ids: [1,2,...]  
        // 对应id的数据
        entities: {  
            1:{id:1,age:'20',name:'A'},
            2:{id:2,age:'22',name:'B'},
            ...+100
        }  
    }

依然是更新操作为例,只需要读取entities对应id的数据进行修改。

使用方法

  • 创建,接收参数可以设置id的字段名,以及根据entities对象获取数组的排序方式
feature/user.js 复制代码
    import {createSlice,createEntityAdapter} from "@reduxjs/toolkit";
    //创建
    const componentsAdapter = createEntityAdapter({
            selectId: (component) => component.id,
            sortComparer: (a, b) => a.zIndex - b.zIndex,
    });
  • 初始化,可以传入除了内置的ids和entities之外的其他state
js 复制代码
const initialState = componentsAdapter.getInitialState({
	activeComponentIds: [], //此时的initialState:{ids:[],entities:{},activeComponentIds:[]}
});
  • 传入Slice并定义reducers。内置了常用的增删改查的方法

示例:

js 复制代码
const componentsListSlice = createSlice({
	name: "componentsList",
	initialState, // {ids:[],entities:{'id1':{} } }
	reducers: {
        addComponent:(state,action){
            componentsAdapter.addOne(state,action.payload)
         },
        updateComponent:(state,action){
            componentsAdapter.opdateOne(state,{
                id:action.payload.id,
                changes: action.payload,
            })
        }
   }
})

注意update相关的操作,对数据进行的浅拷贝,因此如果数据结构包含嵌套的引用类型,需要注意先对数据进行深拷贝,或明确传入需要修改的字段,避免影响。例如:

js 复制代码
    updateComponentStyleConfig: {
       reducer: (state, action: PayloadAction<Partial<ComponentItem>>) => {
            const { id, ...rest } = action.payload;
            componentsAdapter.updateOne(state, {
                    id,
                    changes: {
                        style: {
                            ...state.entities[id].style,
                            ...rest,
                        },
                    },
            });
    }

读取state

内置getSelectors()函数,返回多种读取数据的方式

js 复制代码
export const { selectAll: allComponents, selectById: selectComponentById } =
	componentsAdapter.getSelectors((state) => state.componentList);

可以结合createSelector缓存计算后的state值

js 复制代码
 const activeComponentId = createSelector(
	(state) => {
		return state.componentList.activeComponentIds;
	},
	(ids) => {
		return ids.length === 1 ? ids[0] : "";
	},
);
相关推荐
山有木兮木有枝_3 分钟前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树18 分钟前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐23 分钟前
uniapp中APPwebview与网页的双向通信
前端·uni-app
10年前端老司机35 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星35 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构37 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚38 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin39 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
lichenyang45341 分钟前
React项目(移动app)
前端
用户618482402195142 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端