redux教程，如何定义一个实体适配器EntityAdapter？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文描述一个更高级的redux内容，实体适配器EntityAdapter。当然，普通的数据操作是用不到实体适配器的。这个EntityAdapter主要用于在js里面，做类似数据库的操作，可以想象去操作一个mysql的数据表里面的数据（然而并不是）。

大家好，京城非著名互联网从业人员苏南大叔的博客，这里描述能赚大钱的代码故事。本文描述，如何在redux里面创建实体适配器EntityAdapter。测试环境：win10，node@16.14.2，webpack@5.74.0，webpack-cli@4.10.0，webpack-dev-server@4.9.3，reduxjs/toolkit@1.8.3，chrome@103.0.5060.53，redux-devtools-extension@3.0.11。

测试环境

从下面这篇文章里面，可以知道：redux是可以单独使用的。并且其最先进的toolkit的理念，是需要webpack类的支持的。

• https://newsn.net/say/redux-toolkit.html

您如果想要完整的运行本文的文章，可能需要自己搭建个合适的webpack-dev-server的环境。参考文章：

• https://newsn.net/say/webpack-dev-server-2.html

搭建好之后，就两个主要文件。

• 一个是public/index.html，非常非常普通的一个空页面。
• 另外一个是src/index.js，放置本文的测试代码。

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

createEntityAdapter

测试代码：

const personAdapter = createEntityAdapter({
  sortComparer: (a, b) => a.name.localeCompare(b.name),
  selectId: (person) => person.id,
});

创建实体关系的时候，传入了两个参数，分别是sortComparer和selectId。这些只是定制的部分，不设置这些也是可以的。

sortComparer

设置sortComparer排序，因为要操作的是一系列的数据，这些数据之间存在着一个排序的问题，就是使用.name进行排序的。

sortComparer: (a, b) => a.name.localeCompare(b.name)

有关localeCompare()函数的说明，可以参考文章：

• https://newsn.net/say/js-localecompare.html

selectId

这个属性selectId，可就不能乱设置了。这个实际上是设置每条数据唯一性的标准的，一般来说就是看id的。如果改成了别的属性，可能就会世界大乱。

selectId: (person) => person.id,

.getInitialState()

redux的核心玩法就是state，而createEntityAdapter的时候，有个标准的state，用于创建slice。可以通过下面的方法，查看默认的state结构。

personAdapter.getInitialState();

实际上默认的存在两个属性.ids和.entities，也可以添加一些自定义的state。参考如下：

personAdapter.getInitialState({loading: 'idle'})

后续操作

后续操作就是：
使用createEntityAdapter初始化自定义状态.getInitialState()。

const initState = personAdapter.getInitialState({
  loading: 'idle'
});

然后使用这个自定义状态，定义个slice。

const personSlice = createSlice({
  name: 'person',
  initialState: initState,
  reducers: {}
});

然后把slice的reducer传入store。就万事俱备了。

const store = configureStore({
  reducer: {
    person: personSlice.reducer
  }
});

本文中，没有定义reducer逻辑，待后续文章解决。

当然也可以使用store的getState()，再次查看一下自定义的state当前值。

console.log(store.getState());

相关文章

• https://newsn.net/say/redux-store.html
• https://newsn.net/say/redux-slice.html
• https://newsn.net/say/redux-slice-2.html

综述

看更多redux文章，请点击：

• https://newsn.net/tag/redux/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。