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

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

苏南大叔:redux教程,实体适配器EntityAdapter有哪些可用selector? - 实体适配器-selector
redux教程,实体适配器EntityAdapter有哪些可用selector?(图3-1)

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

打印所有的可操作对象

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

如何定义一个EntityAdapter,可以参考文章:

测试代码:

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中】

苏南大叔:redux教程,实体适配器EntityAdapter有哪些可用selector? - 运行结果对比
redux教程,实体适配器EntityAdapter有哪些可用selector?(图3-2)

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

苏南大叔:redux教程,实体适配器EntityAdapter有哪些可用selector? - selectbyid
redux教程,实体适配器EntityAdapter有哪些可用selector?(图3-3)

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();

相关文章

综述

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

助理微信

微信打赏码

微信公众号

微信小程序

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

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

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

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