Javascript 我的ReactJS flux应用程序有太多';actiontype';常量,如何将它们分离并命名为名称空间?
我正在构建一个flux应用程序,它涉及许多不同类型的数据,以及对资源的CRUD式修改。这导致了大量ActionType的出现。它们大多数遵循相同的模式,Javascript 我的ReactJS flux应用程序有太多';actiontype';常量,如何将它们分离并命名为名称空间?,javascript,reactjs,flux,Javascript,Reactjs,Flux,我正在构建一个flux应用程序,它涉及许多不同类型的数据,以及对资源的CRUD式修改。这导致了大量ActionType的出现。它们大多数遵循相同的模式,请求实体、请求实体成功、请求实体错误,等等 如何将它们分隔为命名空间常量 理想情况下,不要像这样访问它们: ActionTypes.REQUEST_ENTITY 我可以用一种更理智的方式接近它们,比如 ActionTypes.entity.REQUEST 为什么不跳过常量,只使用字符串值呢?当然,您可能会不时错误地键入一个,但您也可以很容易地
请求实体、请求实体成功、请求实体错误
,等等
如何将它们分隔为命名空间常量
理想情况下,不要像这样访问它们:
ActionTypes.REQUEST_ENTITY
我可以用一种更理智的方式接近它们,比如
ActionTypes.entity.REQUEST
为什么不跳过常量,只使用字符串值呢?当然,您可能会不时错误地键入一个,但您也可以很容易地错误键入常量名称,对吗?无论哪种方式,单元测试都会在同一个地方失败,您将知道哪里出了问题 在没有编译时检查的情况下,这些常量列表的主要价值在于代码更具自文档性,但是如果您的命名约定如此一致,那么将它们全部写为常量可能不值得付出额外的努力
(我想这是一个没有答案的问题,但我已经和其他人进行了同样的对话,因此可能也值得加入到这里的讨论中。)您可以简单地将多个对象(可能从不同的文件导出)合并到
ActionType
//实体_actions.js
module.exports={
实体:{
请求:“实体.请求”,
删除:“实体.删除”,
}
};
//用户_actions.js
module.exports={
用户:{
请求:“user.REQUEST”,
删除:“用户.删除”,
}
};
//actions.js
var entityActions=要求(“./实体_actions”);
var userActions=require(“./user_actions”);
var ActionTypes=Object.assign({},entityActions,userActions);
如果您的环境中没有Object.assign
,则可以使用类似或的内容
我个人使用了一个名为
nestedKeyMirror
的小模块,它接受一个大的嵌套对象,并根据嵌套自动生成值:
函数nestedKeyMirror(obj,命名空间){
名称空间=名称空间| |[];
用于(输入obj){
if(obj.hasOwnProperty(key)&&obj[key]==null){
obj[key]=namespace.concat([key]).join(“:”);
}else if(对象hasOwnProperty(键)和对象类型[key]=“object”){
obj[key]=nestedKeyMirror(obj[key],namespace.concat([key]);
}
}
返回obj;
}
例如,在一个应用程序中,我定义了以下动作类型:
var actionTypes=nestedKeyMirror({
布局:{
调整窗格大小:空
},
画布:{
SET\u属性:null
},
形状:{
ADD:null,
SET_属性:null,
向后发送:null,
向前发送:空,
将_发送回_:null,
将\发送到\前端:空
},
选择:{
选择:空,
取消选择所有:空
},
历史:{
ADD:null,
选择索引:空
}
});
这将给出,例如,actionTypes.SHAPES.ADD
,自动生成的字符串值为“SHAPES:ADD”
。此技术可以与上面的对象合并策略相结合,以轻松创建深度嵌套的动作类型常量
[更新:似乎有人最近发布了一个在npm上执行嵌套密钥镜像的包:]
如果问题是您的所有操作类型看起来都相似,那么您可以轻松创建一个函数来生成它们(此处使用ES6 computed property语法):
函数generateActionType(类型,基本){
返回{
[base]:`${base}{type}`,
[`${base}{u SUCCESS`]:`${base}{u${type}{u SUCCESS`,
[`${base}{u错误`]:`${base}{u${type}}u错误`
};
}
ActionTypes.entity={};
分配(ActionTypes.entity,generateActionType(“实体”,“请求”));
Object.assign(ActionTypes.entity、generateActionType(“entity”、“DELETE”);
ActionTypes.entity.REQUEST\u SUCCESS==“REQUEST\u entity\u SUCCESS”;
从理论上讲,如果在任何地方都使用常量,比较动作类型应该会更快(就像商店中的giantswitch
语句)。但这真的值得吗?我知道我的问题很值得讨论,抱歉。我一直在研究反流,想知道是否可以从中得到一些想法。