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

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

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

State data flow【本文首发于唐霜的博客】

In the ecology of re【版权所有，侵权必究】【原创内容，转载请注明出处】act, we advocate one【版权所有，侵权必究】转载请注明出处：www.tangshuang.net way data flow and i【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。mmutable state circu未经授权，禁止复制转载。原创内容，盗版必究。lation. In ideal, ou转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。r state flow is like【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】 this:

However, UX handler 【未经授权禁止转载】原创内容，盗版必究。will push data back,【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。 so it comes to be a【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。 circle like this:

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

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

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

Evil Reducer著作权归作者所有，禁止商业用途转载。

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

Let’s look int【原创内容，转载请注明出处】【版权所有，侵权必究】o what we will have 【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】in redux+react syste【本文首发于唐霜的博客】【原创不易，请尊重版权】m:

Yes, we get one way 原创内容，盗版必究。原创内容，盗版必究。data flow, but we ha原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netve to code here, her本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。e and here…

And I must combine t【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.nethese all parts toget本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】her and must make th【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。em work well without本文版权归作者所有，未经授权不得转载。【转载请注明来源】 any error.

Too many parts cause【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net fragility!

In fact, I do want t【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】o focus on business 【本文首发于唐霜的博客】【转载请注明来源】components’ de【关注微信公众号：wwwtangshuangnet】【转载请注明来源】v.

Diehard Immutable【版权所有】唐霜 www.tangshuang.net

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

Eumm… Why shou著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netld I write so many &未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】#8230; and have to c【作者：唐霜】本文版权归作者所有，未经授权不得转载。reate such a deep ne本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。sted repeated object【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。?

Magician Immer本文版权归作者所有，未经授权不得转载。

Immer著作权归作者所有，禁止商业用途转载。 is a library which 未经授权，禁止复制转载。【原创不易，请尊重版权】help developers to i【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。mmutablly modify obj著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。ect. It is amazing t【转载请注明来源】转载请注明出处：www.tangshuang.nethat it provides only未经授权，禁止复制转载。【转载请注明来源】 one API produce function:【版权所有】唐霜 www.tangshuang.net

import produce from 'immer'

And the typical usag未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】e is:

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

In the second parame著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】ter, it looks like a【转载请注明来源】【版权所有】唐霜 www.tangshuang.net mutable operation, 【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】but in fact, it is j【未经授权禁止转载】未经授权，禁止复制转载。ust a draft, the out转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】put next is a new object whi【作者：唐霜】原创内容，盗版必究。ch is from prev.【关注微信公众号：wwwtangshuangnet】

From now on, I will 【本文首发于唐霜的博客】【原创内容，转载请注明出处】drop object-spread o原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】peration thanks for 【版权所有】唐霜 www.tangshuang.net【转载请注明来源】immer, easy, clear a本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。nd magic.

New Generation【关注微信公众号：wwwtangshuangnet】

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

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

Decent ReactImmut【原创不易，请尊重版权】

I costed a weekend t【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.neto finish a library react-immut which is a global s未经授权，禁止复制转载。未经授权，禁止复制转载。tate manager and has【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】 similar API as reac【版权所有】唐霜 www.tangshuang.net【转载请注明来源】t-redux but without 【原创不易，请尊重版权】【转载请注明来源】reducers. Let’【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】s look into a glance转载请注明出处：www.tangshuang.net原创内容，盗版必究。:

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【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】s, and has a powerfu【版权所有，侵权必究】【未经授权禁止转载】l dispatch which is based on i【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。mmer 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原创内容，盗版必究。. 转载请注明出处：www.tangshuang.netIf you think this is【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net cool, give me a sta著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。r!

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

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

2020-09-09 2877