在 Dev.to 上面发的这篇文章，简单著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net描述了 react 状态管理的三个阶段，【版权所有，侵权必究】【原创不易，请尊重版权】自己觉得这个思考还不错，把文章摘抄回来，【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。防止以后无法访问 dev.to。

未经授权，禁止复制转载。【关注微信公众号：wwwtangshua【原创内容，转载请注明出处】【本文受版权保护】ngnet】【转载请注明来源】【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netngnet】

I have used react an【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。d react-redux for a 著作权归作者所有，禁止商业用途转载。【转载请注明来源】long time. During la原创内容，盗版必究。本文作者：唐霜，转载请注明出处。st 2 years, I found 本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。it is so complex whe本文版权归作者所有，未经授权不得转载。【转载请注明来源】n I want to find out著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。 a single data flow 【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。from a dispatcher to原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】 usage through over 转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】than 5 files that I 本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。am now boring with r【本文受版权保护】本文作者：唐霜，转载请注明出处。edux’s reducer【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】 and sync operation 【未经授权禁止转载】【版权所有，侵权必究】which makes async op【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】eration evil. I have【本文受版权保护】原创内容，盗版必究。 been thinking about本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】 building my own rea未经授权，禁止复制转载。【原创不易，请尊重版权】ct global state mana【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。ger and finally I bu【版权所有，侵权必究】原创内容，盗版必究。ilt a library react-immut to implement my goa【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netl.

State data flow

In the ecology of re本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。act, we advocate one【版权所有，侵权必究】原创内容，盗版必究。 way data flow and i【作者：唐霜】未经授权，禁止复制转载。mmutable state circu【原创不易，请尊重版权】未经授权，禁止复制转载。lation. In ideal, ou【转载请注明来源】原创内容，盗版必究。r state flow is like【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。 this:

However, UX handler 著作权归作者所有，禁止商业用途转载。【作者：唐霜】will push data back,转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。 so it comes to be a本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。 circle like this:

Each time we want to转载请注明出处：www.tangshuang.net【版权所有，侵权必究】 update a component&【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。#8217;s props, we wi【本文首发于唐霜的博客】【版权所有，侵权必究】ll propagate the eve【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。nt back to the root 本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】parent to change the【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。 parent’s stat【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。e to trigger UI rere本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。nder. This make nest本文作者：唐霜，转载请注明出处。原创内容，盗版必究。ed components full o【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。f no-use-pipe props.

To make it more conv【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】enient, react offica【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】l propose flux archi未经授权，禁止复制转载。【原创不易，请尊重版权】tecture which guide 【转载请注明来源】未经授权，禁止复制转载。us to build global s原创内容，盗版必究。未经授权，禁止复制转载。tate manager. Redux 转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】(react-redux) become本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。 the most popular gl本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】obal state manager. 【版权所有】唐霜 www.tangshuang.net【转载请注明来源】The state data flow 转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。pattern switch to cr本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。ossing components【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。217; level like this【作者：唐霜】著作权归作者所有，禁止商业用途转载。:

Global state manager原创内容，盗版必究。【本文首发于唐霜的博客】 make it much more c【原创内容，转载请注明出处】【本文受版权保护】lear in deep nested 本文版权归作者所有，未经授权不得转载。【转载请注明来源】components net. Ever未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。y 2 components no ma【转载请注明来源】【版权所有，侵权必究】tter how many levels【原创内容，转载请注明出处】【本文受版权保护】 space are there bet原创内容，盗版必究。【原创内容，转载请注明出处】ween them, they can 【未经授权禁止转载】【本文首发于唐霜的博客】communicate with eac【作者：唐霜】本文作者：唐霜，转载请注明出处。h other by two step 【转载请注明来源】著作权归作者所有，禁止商业用途转载。with redux as a midd【本文受版权保护】未经授权，禁止复制转载。leman.

Evil Reducer

The time in which re转载请注明出处：www.tangshuang.net【转载请注明来源】ducer was treated as【转载请注明来源】【未经授权禁止转载】 a angel has past, a【原创内容，转载请注明出处】【本文受版权保护】long with code incre本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。asing, redux reducer本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。 and action function本文版权归作者所有，未经授权不得转载。【本文受版权保护】s make us headache. 本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】Why should I write s【原创内容，转载请注明出处】【作者：唐霜】o much non-real-rela本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】ted code? Our purpos转载请注明出处：www.tangshuang.net【作者：唐霜】es is to finish UI b【本文受版权保护】【本文首发于唐霜的博客】uilding more quickly未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。, but redux slow us 【本文首发于唐霜的博客】【转载请注明来源】down like a stumblin本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netg block. And when I 【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】debug, I have to jum【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netp amoung files to fi【未经授权禁止转载】【转载请注明来源】nd out why the data 【本文受版权保护】【关注微信公众号：wwwtangshuangnet】has changed to make 【原创内容，转载请注明出处】未经授权，禁止复制转载。error. If you give m【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.nete a knife, I will pa【版权所有，侵权必究】【转载请注明来源】ss it to redux.

Let’s look int【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。o what we will have 【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。in redux+react syste【本文受版权保护】【未经授权禁止转载】m:

Yes, we get one way 原创内容，盗版必究。【本文首发于唐霜的博客】data flow, but we ha【原创不易，请尊重版权】【本文受版权保护】ve to code here, her【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】e and here…

And I must combine t【原创内容，转载请注明出处】【本文首发于唐霜的博客】hese all parts toget【原创内容，转载请注明出处】【版权所有，侵权必究】her and must make th【版权所有，侵权必究】未经授权，禁止复制转载。em work well without【关注微信公众号：wwwtangshuangnet】【本文受版权保护】 any error.

Too many parts cause转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。 fragility!

In fact, I do want t【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】o focus on business 未经授权，禁止复制转载。【版权所有，侵权必究】components’ de原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。v.

Diehard Immutable

To ensure my state c【本文受版权保护】【原创内容，转载请注明出处】hange as immutable, 【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】I have grown to be a著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。 player of object-sp【原创不易，请尊重版权】【作者：唐霜】read(…). Let&#【转载请注明来源】转载请注明出处：www.tangshuang.net8217;s look into a c【作者：唐霜】【原创内容，转载请注明出处】ase:

Eumm… Why shou【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。ld I write so many &【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】#8230; and have to c未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。reate such a deep ne本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。sted repeated object【未经授权禁止转载】【未经授权禁止转载】?

Magician Immer

Immer is a library which 【原创内容，转载请注明出处】【原创内容，转载请注明出处】help developers to i【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。mmutablly modify obj【作者：唐霜】本文作者：唐霜，转载请注明出处。ect. It is amazing t【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。hat it provides only【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。 one API produce function:

import produce from 'immer'

And the typical usag未经授权，禁止复制转载。【原创内容，转载请注明出处】e is:

const next = produce(prev, draft => {
  draft.root.parent.child[1].name = 'new name'
})

In the second parame【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ter, it looks like a【原创不易，请尊重版权】【原创不易，请尊重版权】 mutable operation, 【作者：唐霜】转载请注明出处：www.tangshuang.netbut in fact, it is j【本文受版权保护】【版权所有】唐霜 www.tangshuang.netust a draft, the out【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。put next is a new object whi转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ch is from prev.

From now on, I will 【转载请注明来源】【本文首发于唐霜的博客】drop object-spread o【作者：唐霜】【关注微信公众号：wwwtangshuangnet】peration thanks for 【转载请注明来源】本文版权归作者所有，未经授权不得转载。immer, easy, clear a转载请注明出处：www.tangshuang.net原创内容，盗版必究。nd magic.

New Generation

React hooks is a new著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】 way to penetrate ne【本文首发于唐霜的博客】【本文受版权保护】sted components net.【作者：唐霜】【作者：唐霜】 React-redux has pro未经授权，禁止复制转载。【本文首发于唐霜的博客】vided a useSelector hook function to ge【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】t state from global 本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netstore. useContext give us a chance to本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net siphon from top con【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】text. useReducer is a sample plate f【转载请注明来源】【版权所有】唐霜 www.tangshuang.netor use to use [state, dispatch] pattern in local sc转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netope.

Generation 2 global 【本文受版权保护】未经授权，禁止复制转载。state management is 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。based on hooks. You 【原创内容，转载请注明出处】【版权所有，侵权必究】may hear the new sta本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】te manager Recoil which is published 【本文受版权保护】【版权所有】唐霜 www.tangshuang.netby a facebook team. 【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。In recoil, state and原创内容，盗版必究。【作者：唐霜】 actions are abstrac【未经授权禁止转载】转载请注明出处：www.tangshuang.nett as atoms, selector【转载请注明来源】著作权归作者所有，禁止商业用途转载。s.

Decent ReactImmut

I costed a weekend t本文作者：唐霜，转载请注明出处。【转载请注明来源】o finish a library react-immut which is a global s【版权所有，侵权必究】未经授权，禁止复制转载。tate manager and has【作者：唐霜】【本文受版权保护】 similar API as reac转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】t-redux but without 【转载请注明来源】【关注微信公众号：wwwtangshuangnet】reducers. Let’【原创内容，转载请注明出处】原创内容，盗版必究。s look into a glance本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。:

import { createStore, Provider, useStore } from 'react-immut'

const store = createStore({
  name: 'tom',
  age: 10,
})

function App() {
  return (
    <Provider store={store}>
      <div class="container">
        <h3>Some Person</h3>
        <Person />
      </div>
    </Provider>
  )
}

function Person() {
  const [state, dispatch] = useStore()
  const { name, age } = state
  const grow = () => dispatch(state => {
    // here `state` is a draft of global state
    state.age ++
  })
  return (
    <div>
      <span>Name: {name}</span>
      <span>Age: {age} <button onClick={grow}>Grow</button></span>
    </div>
  )
}

Look, isn’t is【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net easy? We have no ne【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】ed to define reducer【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】s, and has a powerfu原创内容，盗版必究。原创内容，盗版必究。l dispatch which is based on i未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netmmer and make state 【本文受版权保护】本文版权归作者所有，未经授权不得转载。change clear, conven【原创不易，请尊重版权】【原创不易，请尊重版权】ient and comfortable【作者：唐霜】原创内容，盗版必究。.

This is a typical us原创内容，盗版必究。转载请注明出处：www.tangshuang.netage of react-immut, 【本文受版权保护】【原创内容，转载请注明出处】you can learn more f本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。rom repo. If you think this is【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net cool, give me a sta【版权所有，侵权必究】【未经授权禁止转载】r!

Summary

We have experienced 【作者：唐霜】【原创内容，转载请注明出处】crossing props state【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】 management, global 【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。middleman state mana【作者：唐霜】【原创内容，转载请注明出处】gement and now we ar本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。e using hooks to man未经授权，禁止复制转载。原创内容，盗版必究。age our state (globa【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。l or local). We have【作者：唐霜】原创内容，盗版必究。 followed immutable 【原创内容，转载请注明出处】【作者：唐霜】(redux) and mutable 【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】(mobx) dispatching, 【转载请注明来源】未经授权，禁止复制转载。and now we are facin转载请注明出处：www.tangshuang.net原创内容，盗版必究。g mutable-produce-im【转载请注明来源】【原创不易，请尊重版权】mutable dispatching.本文作者：唐霜，转载请注明出处。【本文受版权保护】 Which will you choo原创内容，盗版必究。原创内容，盗版必究。se?

2020-09-09 3048