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] : "";
	},
);
相关推荐
满分观察网友z7 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
满分观察网友z10 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
bemyrunningdog11 分钟前
二进制权限控制方案
javascript·react.js·ecmascript
西西木科技丨Shopify开发机构16 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙22 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1123 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆27 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er32 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0635 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444038 分钟前
javaweb———html
前端·javascript·html