redux

list

  1. refactor

    flux redux rematch redux-saga dva mirror

  2. context hooks

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

  3. 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 Event flow

vue

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

problem

  1. Template code

  2. The global status changed to module status

    redux or zustand
vuex or composition-api
reactive/ref
Copy the code
    // 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})

Copy the code

  3. Zombie Children/Context Loss/Currency: Timing issues, update too fast, render too slow

    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

  4. Immutable and asynchronous, too many updates cause too much render, too few updates cause too little render

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

const data = { a: { a1: 1 }, b: { b1: 2}}// b doesn't change at all
data.a1. = 2 // a1 a data needs to be changed

// +immer prevents [...a,...b] from being too verbose
Copy the code

resource

  • zustand

  • valtio

  • jotai

  • Obsolete props and zombie child nodes in Redux

  • How to gracefully handle unnecessary rendering when using React Context?