前端状态管理 stash
Opened this issue · 0 comments
**的碎片
数据按照生命周期去划分:
- 应用级,这一类数据的有效性横跨一次用户打开应用到应用关闭:如登录用户的基本信息,一些全局的数据字典等
- 单页面级,这一类数据有效性持续到一个单页的开启和关闭:如一个单页页面
数据初始化时机:
- 在系统初始化时,一起初始化
- 后期由用户的操作触发初始化
如果认为用户进入页面,也是一种操作,应该是系统初始化的时候一起进入
微前端 stash
https://tech.meituan.com/2020/02/27/meituan-waimai-micro-frontends-practice.html
redux 与 rx
https://www.notion.so/RxJS-Redux-CQRS-0a6b2b582a3347dda8accc138ba1396c
挺有意思的
https://juejin.im/post/6844904004007231496
页面级组件的状态怎么耦合?
redux-saga 的模块中页面跳转怎么处理?
方法一:
直接在 saga 调用 react-router 相关的 push 方法,这种方法是最直观,也是比较自然的方式。
但是这种方式使得状态管理层,耦合了路由相关的逻辑
方法二:
在每次方法调用成功或者失败以后,进行状态的转移,这样我们也能够把页面切换的控制权
转交到组件层?页面级组件,利用状态的转移来决定自己的行为
抽时间看看
https://juejin.im/entry/5b50518bf265da0f6436c34a
@@@
https://typeless.js.org/introduction/motivation
作者为某太狼,很接近当前内部使用的技术栈了
https://github.com/sigi-framework/sigi
hox 很强力
https://github.com/umijs/hox/blob/master/README-cn.md
利用一个一个 api 将 useState 提升到全局
umijs useRequest
ractor
https://github.com/FE-Ractor/ractor/blob/master/readme.cn.md
recoiljs 数据管理
https://recoiljs.org/docs/introduction/getting-started
rematch 笔记
https://rematch.github.io/rematch/#/README?id=getting-started-1
ngrx 笔记
https://ngrx.io/guide/data/architecture-overview
https://ngrx.io/guide/store/metareducers 相当于 middleWare 之于 redux
store => entity
store 只是基于 redux 做了类型相关的接口,
提供了最简单的机制让我们定义 action,reducer,selectors
entity 是一组工具函数,
EntityCollectionService.getAll() 在这个方法调用中,dispatch 了对应的 action 到 store,触发 reducer 的执行。
Entity Metadata 是一个用于描述 Entity 类型的元语言。
ngrx entity
createEntityAdapter<T>(
options: {
selectId?: IdSelector<T>;
sortComparer?: false | ComparerNum<T> | ComparerStr<T>;
} = {}
): EntityAdapter<T>
EntityAdapter 是一组由属性和纯函数组成的对象
interface EntityAdapter<T> extends EntityStateAdapter {
selectId: IdSelector<T>
sortComparer: false | Comparer<T>
getInitialState(): EntityState<T>
getSelectors(): EntitySelectors<T, EntityState<T>>
}
接口文档:
https://ngrx.io/api/data/EntityMetadata
## https://github.com/SebastianM/tinystate
一个更便捷的状态管理工具
## redux-saga-sugar 的问题
https://github.com/jasonHzq/redux-saga-sugar
小小总结:提出了很好的蓝图,或者说大饼?但是易用性总觉得存疑
分层抽象是好的,但是内部层次过多,是否导致后期的定制化过于复杂?
## ngxs 总结
https://www.ngxs.io/
https://www.ngxs.io/concepts/actions
group your actions 相比较于给 action 添加前后缀,然后逐一的从单文件中导出,
通过 namespace 将 actions 组织到同一个 namespace 下进行统一的管理,
看起来是一个更好的实践。
## 一些其他的地方
## easy-redux
http://callmedadaxin.github.io/2018/05/18/rethink-redux/
https://github.com/callmedadaxin/easy-redux
##
https://cnodejs.org/topic/5da7d24e865a9844a301bdb4
## dva 模块相关
``` javascript
// 创建应用
const app = dva();
// 注册 Model
app.model({
namespace: 'count',
state: 0,
reducers: {
add(state) { return state + 1 },
},
effects: {
*addAfter1Second(action, { call, put }) {
yield call(delay, 1000);
yield put({ type: 'add' });
},
},
});
// 注册视图
app.router(() => <ConnectedApp />);
// 启动应用
app.start('#root');
如果 reducers 和 effects 中有相同的 key 发生冲突怎么办?
mongoDb
https://www.meteor.com/
https://zhuanlan.zhihu.com/p/55080237
angular-redux
https://github.com/angular-redux/store
api
https://zhuanlan.zhihu.com/p/52282779