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

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

苏南大叔:redux教程,如何定义一个实体适配器EntityAdapter? - redux实体适配器
redux教程,如何定义一个实体适配器EntityAdapter?(图4-1)

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

测试环境

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

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

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

  • 一个是public/index.html,非常非常普通的一个空页面。
  • 另外一个是src/index.js,放置本文的测试代码。
import {createEntityAdapter,createSlice,configureStore} from '@reduxjs/toolkit';

苏南大叔:redux教程,如何定义一个实体适配器EntityAdapter? - 基础代码
redux教程,如何定义一个实体适配器EntityAdapter?(图4-2)

createEntityAdapter

测试代码:

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

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

sortComparer

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

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

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

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'
});

苏南大叔:redux教程,如何定义一个实体适配器EntityAdapter? - slice-state
redux教程,如何定义一个实体适配器EntityAdapter?(图4-3)

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

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

然后把slicereducer传入store。就万事俱备了。

const store = configureStore({
  reducer: {
    person: personSlice.reducer
  }
});
本文中,没有定义reducer逻辑,待后续文章解决。

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

console.log(store.getState());

苏南大叔:redux教程,如何定义一个实体适配器EntityAdapter? - 查看state结构
redux教程,如何定义一个实体适配器EntityAdapter?(图4-4)

相关文章

综述

看更多redux文章,请点击:

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   redux