Javascript 当状态树的两个分支具有相同的选择器名称时,如何管理redux选择器?
例如,假设我们有一个称为Javascript 当状态树的两个分支具有相同的选择器名称时,如何管理redux选择器?,javascript,redux,react-redux,Javascript,Redux,React Redux,例如,假设我们有一个称为game的切片状态。在游戏下我们有两个实体,敌人和物品。每个实体都有x坐标来记录其位置。状态树如下所示: { game: { enemies: { allEnemies: [ { id: 1, x: 100, }, { id: 3, x: 300, } ], allEnemies
game
的切片状态。在游戏下
我们有两个实体,敌人
和物品
。每个实体都有x坐标来记录其位置。状态树如下所示:
{
game: {
enemies: {
allEnemies: [
{
id: 1,
x: 100,
},
{
id: 3,
x: 300,
}
],
allEnemiesById: [1, 3],
},
items: {
allItems: [
{
id: 2,
x: 200,
},
{
id: 7,
x: 500,
}
],
allItemsById: [2, 7],
}
}
}
当然,敌人
实体和物品
实体将具有其他不同的属性。在game
reducer中还有其他逻辑,所以我不能简单地删除它
现在,在游戏中
reducer中,我们有两个选择器分别获取可见的敌人和物品。他们在敌人
和项目
中委托选择器功能,因为我不想让游戏
知道敌人
和项目
的状态树细节:
reducers/game.js
import { enemies, selector1 } from './enemies.js';
import { items, selector2 } from './items.js';
const getVisibleEnemies = (state) => selector1(state.enemies)
const getVisibleItems = (state) => selector2(state.items)
export const getVisibleEnemies = (state) => enemies.getVisibleEntities(state.enemies)
export const getVisibleItems = (state) => items.getVisibleEntities(state.enemies)
但现在的问题是:selector1
和selector2
的名称应该是什么?我考虑了一些解决方案,但我不太满意:
(1) getVisibleEntities
:但在游戏中不能有两个相同的函数名
(2) getVisibleXXX
:但这与游戏中的选择器名称相同
(3) 只需在客户端代码中直接调用敌人
和项目
的选择器,例如(在mapStateToProps
中获取可见敌人(state.game.敌军)
):但现在调用者必须知道状态树的深层形状,一旦状态树发生变化,将痛苦地改变所有状态树
(4) 在reducer函数中绑定选择器,例如:
减速器/敌人.js
导出常量getVisibleEntities(状态)=>{
//为敌人实现getVisibleEntities
}
reducers/items.js
导出常量getVisibleEntities(状态)=>{
//项目的getVisibleEntities的实现
}
reducers/game.js
import { enemies, selector1 } from './enemies.js';
import { items, selector2 } from './items.js';
const getVisibleEnemies = (state) => selector1(state.enemies)
const getVisibleItems = (state) => selector2(state.items)
export const getVisibleEnemies = (state) => enemies.getVisibleEntities(state.enemies)
export const getVisibleItems = (state) => items.getVisibleEntities(state.enemies)
但我不确定将选择器设置为state reducer的属性是否是一个好主意
(5) 给它起一个稍微不同的名字,例如game.js中的getVisibleEneyemisimpl
和toughts.js中的getVisibleEneyemesimpl
:这很好,但我想知道应该有更好的方法来处理这个问题
那么你会怎么做呢?我认为你应该选择选项(3),但是:
- 选择器应该是整个Redux存储状态的函数
- 这样,容器(智能组件)就不必知道状态树的深层形状