记前端状态管理库Akita中的一个坑
记状态管理库Akita中的一个坑
Akita是什么
Akita是一种基于RxJS的状态管理模式,它采用Flux中的多个数据存储和Redux中的不可变更新的思想,以及流数据的概念,来创建可观察的数据存储模型。 无论是Angular、React、Vue、Web组件,还是普通的旧式JS,秋田都可以完成繁重的工作,并作为维护干净、无样板、可伸缩的应用程序的有用工具。
Akita基于面向对象的设计原则,而不是函数式编程,因此具有OOP经验的开发人员应该感到很熟悉。它您的团队提供了一个不可偏离的固定模式。
注意一个坑
在创建Entity Store时根据需求您可能需要在@StoreConfig()装饰器中配置Entity Store 的id属性
直接上代码
一段ts代码
import { Todo } from './todo.model';
import { EntityState, EntityStore, StoreConfig } from '@datorama/akita';
export interface TodosState extends EntityState<Todo> { }
// fixme 注意这里
@StoreConfig({ name: 'todos' })
export class TodosStore extends EntityStore<TodosState, Todo> {
constructor() {
super();
}
}
这是一段官方的demo,但是其中有个坑。 若您Entity Store中的实体类型中唯一标识不为
id,则需要自己手动设置 Akita @StoreConfig 会默认绑定您实体类型中的id属性作为唯一标识,若 不绑定唯一标识且@StoreConfig又找不到id属性则EntityStore在调用 set存储数据时会出错(但是不会报错。。。。。天坑,不知道时有意为之还是bug)
若唯一标识Entity Id不为id则写为下面这种形式
一段ts代码:
import { Todo } from './todo.model';
import { EntityState, EntityStore, StoreConfig } from '@datorama/akita';
export interface TodosState extends EntityState<Todo> { }
// fixme 注意这里,修改后为
@StoreConfig({ name: 'todos',idKey: yourId })
export class TodosStore extends EntityStore<TodosState, Todo> {
constructor() {
super();
}
}
吐槽一下: 还有就是官网在文档关于这个需要特别注意 事项这个唯一标识绑定的介绍是在创建Entity Store之后的...(坑死欧啦)
记前端状态管理库Akita中的一个坑的更多相关文章
- 网页前端状态管理库Redux学习笔记(一)
最近在博客园上看到关于redux的博文,于是去了解了一下. 这个Js库的思路还是很好的,禁止随意修改状态,只能通过触发事件来修改.中文文档在这里. 前面都很顺利,但是看到异步章节,感觉关于异步说得很乱 ...
- React 新 Context API 在前端状态管理的实践
本文转载至:今日头条技术博客 众所周知,React的单向数据流模式导致状态只能一级一级的由父组件传递到子组件,在大中型应用中较为繁琐不好管理,通常我们需要使用Redux来帮助我们进行管理,然而随着Re ...
- vue组件化开发-vuex状态管理库
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...
- 比Redux更容易上手的状态管理库
前言 当项目越发复杂时,我们发现仅仅是提升状态已经无法适应如此复杂的状态管理了,程序状态变得比较难同步,操作,到处是回调,发布,订阅,这意味着我们需要更好的状态管理方式,于是就引入了状态管理库,如Re ...
- 轻量级状态管理库Pinia试吃
最近连续看了几个GitHub上的开源项目,里面都用到了 Pinia 这个状态管理库,于是研究了一下,发现确实是个好东西!那么,Pinia 的特点: 轻量化 -- Pinia 体积约1KB,十分轻巧 ...
- andriod8.1.0源码编译中的一个坑-package com.sun.javadoc does not exist
这里记录编译过程中的一个坑!!! 编译过程中出现了下面的报错 external/doclava/src/com/google/doclava/ClassInfo.java:20: error: pac ...
- xcode中得一个坑
因项目需求变动,我必须在coredata中的WorkLogModel表中添加一个字段:抄送人.起初我给这个字段起名为copyPerson,一切准备就绪后,发现从数据库读取这个copyPerson时,第 ...
- PHP中的一个”坑“
说一个极有可能在工作中遇到的问题——foreach的引用 foreach $arr = range(1,3); //[1,2,3] foreach($arr as &$val) { } for ...
- Spring Boot 计划任务中的一个“坑”
计划任务功能在应用程序及其常见,使用Spring Boot的@Scheduled 注解可以很方便的定义一个计划任务.然而在实际开发过程当中还应该注意它的计划任务默认是放在容量为1个线程的线程池中执行, ...
随机推荐
- QT中,控件显示不下,用...表示
void CommonHelper::setQLabelText(QLabel *label, const QString &text) { QFontMetrics cs(label-> ...
- struts1之工作原理
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/zkn_CS_DN_2013/article/details/34452341 1.初始化:strut ...
- MVC设计之从零打造到实际操作(总汇)
我们为什么要自己搭建一个MVC架构的框架? 1.为了更快的开发效率 2.为了更高的运行效率 3.为了更好的证明自己 在别的框架中,有些方法我们使用起来可能会比较麻烦,我们可以在自己的框架中写一些自己想 ...
- Python基础:17类和实例之一(类属性和实例属性)
1:类通常在一个模块的顶层进行定义.对于Python来说,声明与定义类是同时进行的. 2:类属性仅与其类相绑定,类数据属性仅当需要有更加“静态”数据类型时才变得有用,这种属性是静态变量.它们表示这些数 ...
- 阿里云POLARDB 2.0重磅来袭!为何用户如此的期待?
点击报名:POLARDB 2.0 升级发布会 回顾POLARDB 1.0升级之路 POLARDB 1.0主要的改进包括采用了计算存储分离的架构,完全兼容MYSQL,性能是原生MySQL的6倍.一个用户 ...
- 从零学React Native之06flexbox布局
前面我们接触了好多React Native代码, 并没有介绍RN中的组件具体是如何布局的,这一篇文章,重点介绍下flexbox布局. 什么是flexbox布局 React中引入了flexbox概念,f ...
- UI2CODE智能生成代码——组件识别篇
1.背景 在<UI2CODE——整体设计篇>中,我们介绍了UI2CODE工程的整体流程: 在组件识别这个环节,需要有一种处理布局信息的方法,来解析和计算控件间的布局关系(比如识别业务组件( ...
- @codechef - BIKE@ Chef and Bike
目录 @description@ @solution@ @accepted code@ @details@ @description@ 输入 n(n ≤ 22) 个点,m(m ≤ 8000) 个边.每 ...
- Best Open Source Software
Best Open Source Software Open Source, Software, Top The promise of open source software is best qua ...
- @noi.ac - 506@ 强连通分量
目录 @description@ @solution@ @accepted code@ @details@ @description@ 有一天你学了一个叫能求出有向图中所有的强连通分量的算法,你决定将 ...