redux in reactreact 状态管理分享，从 redux 到 recoil react 状态管理面临了非常多

redux

list

refactor

flux redux rematch redux-saga dva mirror
context hooks

constate unstated unstated-next use-shared-state easy-peasy [swr react-query]
currency

Recoil(exprimental) Jotai(react) zustand < Valtio < effector

outside

mobx(proxy) zustand Valtio(proxy) effector(event and graph) xstate(state machine) BehaviorTree

react native

swr react-query zustand effector(event and graph)

flow pipeline

mitt(event) > tapable(event async) > bach(gulp,just) > effector(event and graph) = rxjs(stream)

tapable bach 事件流

vue

swrv effector(event and graph) valtio(proxy)?

problem

模板代码多

全局状态变为模块状态

redux or zustand
vuex or composition-api
reactive/ref

// ddd
const state1 = reactive({
    a: 1,
    b: 2,
    d: {
        a:1
    }
})

// state1.js
const a = ref(1)
const b = ref({a:1, b: 1, c:2})

zombie children / context loss/ currency：时序问题，更新太快，渲染太慢

gantt
dateFormat YYYY-mm-DD
title redux state

section 1 subscribe
root (3)        :done,    des1, 2021-05-06, 18d
parent (2)      :active,  des2, after des1, 18d
child (1)       :         des3, after des2, 18d

section 2 run
root (3)         :done,    des1, 2021-05-06, 18d
parent (2)       :active,  des2, after des1, 18d
child (1)        :         des3, after des2, 18d

section 3 render
root (1)         :done,    des1, 2021-05-06, 18d
parent (2)       :active,  des2, after des1, 18d
child (3)        :         des3, after des2, 18d

不可变和异步，更新太多导致 render 太多，更新太少导致 render 太少

const state = {} // useState
const action = () => {} // useMemo useCallback

const data = { a: { a1: 1 }, b: { b1: 2 } } // b 完全不用变化
data.a.1 = 2 // a1 a data 都需要变化

// +immer 防止 [...a, ...b] 写法太繁琐

redux in react