前端状态管理 stash

[Mr-haili]

思想的碎片

数据按照生命周期去划分：

1. 应用级，这一类数据的有效性横跨一次用户打开应用到应用关闭：如登录用户的基本信息，一些全局的数据字典等
2. 单页面级，这一类数据有效性持续到一个单页的开启和关闭：如一个单页页面

数据初始化时机：

1. 在系统初始化时，一起初始化
2. 后期由用户的操作触发初始化

如果认为用户进入页面，也是一种操作，应该是系统初始化的时候一起进入

微前端 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

brickspert/blog#35

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

比较迷的东西

https://juejin.im/post/5c70c700f265da2d8c7dcde3#heading-2

https://zhuanlan.zhihu.com/p/61288928