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

【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【作者：唐霜】

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

State data flow

In the ecology of re【关注微信公众号：wwwtangshuangnet】【作者：唐霜】act, we advocate one著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】 way data flow and i著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】mmutable state circu【原创不易，请尊重版权】【本文受版权保护】lation. In ideal, ou本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netr state flow is like本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。 this:

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

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

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

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

Evil Reducer

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

Let’s look int本文作者：唐霜，转载请注明出处。原创内容，盗版必究。o 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【本文首发于唐霜的博客】【原创内容，转载请注明出处】her and must make th著作权归作者所有，禁止商业用途转载。【作者：唐霜】em work well without本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】 any error.

Too many parts cause【本文受版权保护】原创内容，盗版必究。 fragility!

In fact, I do want t未经授权，禁止复制转载。【转载请注明来源】o focus on business 著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。components’ de【版权所有，侵权必究】【转载请注明来源】v.

Diehard Immutable

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

Eumm… Why shou著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netld I write so many &【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】#8230; and have to c【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netreate such a deep ne【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】sted repeated object【版权所有，侵权必究】【本文受版权保护】?

Magician Immer

Immer is a library which 【转载请注明来源】【未经授权禁止转载】help developers to i原创内容，盗版必究。原创内容，盗版必究。mmutablly modify obj本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】ect. It is amazing t原创内容，盗版必究。【未经授权禁止转载】hat it provides only【版权所有，侵权必究】原创内容，盗版必究。 one API produce function:

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, 未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netbut in fact, it is j原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ust a draft, the out【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。put next is a new object whi转载请注明出处：www.tangshuang.net【本文受版权保护】ch is from prev.

From now on, I will 【本文首发于唐霜的博客】【本文受版权保护】drop object-spread o【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】peration thanks for 未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netimmer, easy, clear a著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】nd magic.

New Generation

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

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

Decent ReactImmut

I costed a weekend t【原创内容，转载请注明出处】【本文受版权保护】o finish a library react-immut which is a global s【本文首发于唐霜的博客】【转载请注明来源】tate manager and has【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】 similar API as reac【未经授权禁止转载】【未经授权禁止转载】t-redux but without 【转载请注明来源】本文版权归作者所有，未经授权不得转载。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【作者：唐霜】【本文首发于唐霜的博客】 easy? We have no ne原创内容，盗版必究。【作者：唐霜】ed to define reducer【版权所有，侵权必究】【未经授权禁止转载】s, and has a powerfu本文作者：唐霜，转载请注明出处。【转载请注明来源】l dispatch which is based on i原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。mmer and make state 未经授权，禁止复制转载。【未经授权禁止转载】change clear, conven【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。ient and comfortable转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】.

This is a typical us【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。age of react-immut, 原创内容，盗版必究。【本文受版权保护】you can learn more f【作者：唐霜】原创内容，盗版必究。rom repo. If you think this is【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。 cool, give me a sta【版权所有，侵权必究】转载请注明出处：www.tangshuang.netr!

Summary

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

2020-09-09 3396