在 Dev.to 上面发的这篇文章，简单转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net描述了 react 状态管理的三个阶段，【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】自己觉得这个思考还不错，把文章摘抄回来，本文版权归作者所有，未经授权不得转载。【转载请注明来源】防止以后无法访问 dev.to。

转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【转载请注明来源】本文版权归作者所有，未经授权不得转载。【转载请注明来源】

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

State data flow【原创内容，转载请注明出处】

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

However, UX handler 本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netwill push data back,【本文受版权保护】【作者：唐霜】 so it comes to be a【本文受版权保护】【版权所有，侵权必究】 circle like this:

Each time we want to转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】 update a component&未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net#8217;s props, we wi【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。ll propagate the eve转载请注明出处：www.tangshuang.net【本文受版权保护】nt back to the root 【原创内容，转载请注明出处】原创内容，盗版必究。parent to change the【关注微信公众号：wwwtangshuangnet】【转载请注明来源】 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【本文首发于唐霜的博客】【原创内容，转载请注明出处】l propose flux archi转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】tecture which guide 【本文受版权保护】【原创不易，请尊重版权】us to build global s【版权所有，侵权必究】【转载请注明来源】tate manager. Redux 【版权所有，侵权必究】【本文受版权保护】(react-redux) become著作权归作者所有，禁止商业用途转载。【转载请注明来源】 the most popular gl著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。obal state manager. 本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。The state data flow 【版权所有】唐霜 www.tangshuang.net【转载请注明来源】pattern switch to cr转载请注明出处：www.tangshuang.net【版权所有，侵权必究】ossing components【版权所有，侵权必究】未经授权，禁止复制转载。217; level like this未经授权，禁止复制转载。【原创内容，转载请注明出处】:

Global state manager【未经授权禁止转载】转载请注明出处：www.tangshuang.net make it much more c本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。lear in deep nested 【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】components net. Ever【版权所有】唐霜 www.tangshuang.net【本文受版权保护】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转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】leman.

Evil Reducer【未经授权禁止转载】

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

Let’s look int【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.neto what we will have 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。in redux+react syste【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】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【原创不易，请尊重版权】转载请注明出处：www.tangshuang.nether and must make th【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】em work well without【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。 any error.

Too many parts cause【原创不易，请尊重版权】【原创内容，转载请注明出处】 fragility!

In fact, I do want t【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】o focus on business 【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。components’ de【本文受版权保护】【原创不易，请尊重版权】v.

Diehard Immutable转载请注明出处：www.tangshuang.net

To ensure my state c【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.nethange as immutable, 【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】I have grown to be a未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net player of object-sp本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。read(…). Let&#转载请注明出处：www.tangshuang.net【版权所有，侵权必究】8217;s look into a c本文作者：唐霜，转载请注明出处。【未经授权禁止转载】ase:

Eumm… Why shou【转载请注明来源】【转载请注明来源】ld I write so many &【本文受版权保护】【本文首发于唐霜的博客】#8230; and have to c【作者：唐霜】【未经授权禁止转载】reate such a deep ne转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】sted repeated object未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net?

Magician Immer原创内容，盗版必究。

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

import produce from 'immer'

And the typical usag【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.nete is:

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

In the second parame【未经授权禁止转载】【版权所有，侵权必究】ter, it looks like a未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。 mutable operation, 著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】but in fact, it is j【本文受版权保护】未经授权，禁止复制转载。ust a draft, the out【作者：唐霜】原创内容，盗版必究。put next is a new object whi【原创内容，转载请注明出处】【版权所有，侵权必究】ch is from prev.本文版权归作者所有，未经授权不得转载。

From now on, I will 原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】drop object-spread o【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】peration thanks for 【原创不易，请尊重版权】【版权所有，侵权必究】immer, easy, clear a原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netnd 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【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。t state from global 【本文受版权保护】转载请注明出处：www.tangshuang.netstore. useContext give us a chance to【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。 siphon from top con【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。text. useReducer is a sample plate f【原创不易，请尊重版权】未经授权，禁止复制转载。or use to use [state, dispatch] pattern in local sc本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ope.

Generation 2 global 本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。state management is 【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。based on hooks. You 未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。may hear the new sta【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.nette manager Recoil【版权所有，侵权必究】 which is published 【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】by a facebook team. 【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】In recoil, state and著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。 actions are abstrac【原创内容，转载请注明出处】【未经授权禁止转载】t as atoms, selector著作权归作者所有，禁止商业用途转载。【转载请注明来源】s.

Decent ReactImmut【原创内容，转载请注明出处】

I costed a weekend t未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.neto 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 【转载请注明来源】【未经授权禁止转载】reducers. Let’【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.nets 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转载请注明出处：www.tangshuang.net【转载请注明来源】 easy? We have no ne著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。ed to define reducer原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。s, and has a powerfu【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】l dispatch which is based on i未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netmmer and make state 本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。change clear, conven【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netient and comfortable【版权所有，侵权必究】【转载请注明来源】.

This is a typical us【未经授权禁止转载】【转载请注明来源】age of react-immut, 转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】you can learn more f【本文首发于唐霜的博客】【转载请注明来源】rom repo【版权所有，侵权必究】. 【本文首发于唐霜的博客】If you think this is【转载请注明来源】转载请注明出处：www.tangshuang.net cool, give me a sta【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】r!

Summary【本文受版权保护】

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

2020-09-09 2916