redux教程，实体适配器EntityAdapter有哪些可用selector？

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

这里说redux系列的实体适配器，都提供了哪些selector？这些selector都是用于读取state的，而对于添加修改删除的情况，却并不定义在这里，两者是分开的。目前的结论是：这些函数基本上都是一些鸡肋，没有啥特别的用途，不是很推荐使用。所以，本文就是用于了解其概念的目的了。

大家好，这里是苏南大叔的技术博客，写给一起学习新技术的我们。本文描述redux中实体适配器的selector操作。实体适配器并不是唯一的选择，不使用这个概念，也是可以对state进行操作的。这个EntityAdapter可以理解为一个helper，使用它的话，会更加简单便捷。测试环境：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。

打印所有的可操作对象

EntityAdapter对于state的一个select操作称之为selector。

如何定义一个EntityAdapter，可以参考文章：

• https://newsn.net/say/redux-entity-adapter.html

测试代码：

import {createEntityAdapter,createSlice,configureStore} from '@reduxjs/toolkit';
const personAdapter = createEntityAdapter({
  sortComparer: (a, b) => a.name.localeCompare(b.name),
  // selectId: (person) => person.id,
});
const initState = personAdapter.getInitialState();
const personSlice = createSlice({
  name: 'person',
  initialState: initState,
  reducers: {
    personSetAll:personAdapter.setAll
  }
});
const store = configureStore({
  reducer: {
    person: personSlice.reducer,
  }
});
const {personSetAll} = personSlice.actions;

注意，这里的selector定义里面的person，来自于store里面对于reducer的定义。

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

const s = personAdapter.getSelectors(state => state.person)
console.log(s);

经过打印对象，可以知道存在这如下可选操作：

selectAll: ? (value)
selectById: ? (value)
selectEntities: ? (value)
selectIds: ? (value)
selectTotal: ? (value)

这些操作都是基于store.getState()的，也就是说，需要自己先获取所有的state，然后传入本文中的系列函数中，然后自动筛选出目标总数据.person。然后再根据函数的语义筛选数据。

本文中的.person字样，都来自于这里的定义。【定义在personAdapter.getSelectors中】

store.getState()

先看看原版的数据：

store.getState();

person:
  entities:
    a: {id: 'a', name: '苏1'}
    b: {id: 'b', name: '苏2'}
ids: (2) ['a', 'b']

selectAll

在看看改造后的数：

s.selectAll(store.getState())

返回state中的.person数据。

0: {id: 'a', name: '苏1'}
1: {id: 'b', name: '苏2'}

selectEntities

s.selectEntities(store.getState())

返回state中的.person数据中的所有实体。

a: {id: 'a', name: '苏1'}
b: {id: 'b', name: '苏2'}

selectIds

s.selectIds(store.getState());

返回state中的.person数据中的所有id。【还记得定义实体适配器的时候的selectId么？】

['a', 'b']

selectTotal

s.selectTotal(store.getState())

这个就是个计数的功能，类似于sql语句中的select (*) as cnt，返回值就是个数字2。

selectById

s.selectById(store.getState(),'b')

只有一个selectById，没有selectByIds。每次只能获得一条数据，传入数组返回undefined。

getSelectors对比useselector

import {createEntityAdapter,createSlice,configureStore} from '@reduxjs/toolkit';
const s = personAdapter.getSelectors(state => state.person)
console.log(s.selectAll(store.getState()));

vs

import { useSelector } from 'react-redux';
const selectAll2 = (state) => state.person;
console.log(useSelector(selectAll2));

并且useSelector不能用于顶层代码，getSelectors只能用于EntityAdapter。普通的操作中，请使用：

store.getState();

相关文章

• https://newsn.net/say/redux.html
• https://newsn.net/say/redux-store.html
• https://newsn.net/say/redux-slice.html
• https://newsn.net/say/redux-slice-2.html
• https://newsn.net/say/redux-store.html
• https://newsn.net/say/redux-entity-useselector.html
• https://newsn.net/say/redux-entity-adapter-reducer.html

综述

redux系列教程，更新的快差不多了。后续会接着更新react系列文章，react里面的很多函数看起来和这个redux里面的函数，很相似。所以，睁大双眼哦。

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

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