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

未经授权，禁止复制转载。未经授权，禁止复制转载。【转载请注明来源】

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

State data flow

In the ecology of re【原创不易，请尊重版权】【本文受版权保护】act, we advocate one【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】 way data flow and i【原创不易，请尊重版权】【版权所有，侵权必究】mmutable state circu【转载请注明来源】原创内容，盗版必究。lation. In ideal, ou【未经授权禁止转载】【本文首发于唐霜的博客】r state flow is like著作权归作者所有，禁止商业用途转载。【作者：唐霜】 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&【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】#8217;s props, we wi【本文受版权保护】【版权所有】唐霜 www.tangshuang.netll propagate the eve【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】nt back to the root 本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。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【转载请注明来源】【原创不易，请尊重版权】enient, react offica【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。l propose flux archi原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】tecture which guide 著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netus to build global s【关注微信公众号：wwwtangshuangnet】【转载请注明来源】tate manager. Redux 未经授权，禁止复制转载。【转载请注明来源】(react-redux) become【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。 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 【原创不易，请尊重版权】原创内容，盗版必究。components net. Ever【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】y 2 components no ma【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】tter how many levels【版权所有，侵权必究】原创内容，盗版必究。 space are there bet本文作者：唐霜，转载请注明出处。【转载请注明来源】ween them, they can 本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。communicate with eac本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】h other by two step 【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netwith redux as a midd本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netleman.

Evil Reducer

The time in which re未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】ducer was treated as【原创内容，转载请注明出处】【版权所有，侵权必究】 a angel has past, a【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。long with code incre【未经授权禁止转载】【原创不易，请尊重版权】asing, redux reducer【未经授权禁止转载】本文作者：唐霜，转载请注明出处。 and action function【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。s make us headache. 原创内容，盗版必究。【原创内容，转载请注明出处】Why should I write s【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】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 【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netdown like a stumblin【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。g block. And when I 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。debug, I have to jum【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netp amoung files to fi【未经授权禁止转载】【原创不易，请尊重版权】nd out why the data 原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】has changed to make 著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.neterror. If you give m【本文受版权保护】【本文受版权保护】e a knife, I will pa【作者：唐霜】【原创不易，请尊重版权】ss it to redux.

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

Yes, we get one way 著作权归作者所有，禁止商业用途转载。【转载请注明来源】data flow, but we ha【转载请注明来源】【作者：唐霜】ve to code here, her【版权所有，侵权必究】【原创内容，转载请注明出处】e and here…

And I must combine t本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.nethese all parts toget【未经授权禁止转载】转载请注明出处：www.tangshuang.nether and must make th本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。em work well without【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】 any error.

Too many parts cause未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】 fragility!

In fact, I do want t【转载请注明来源】转载请注明出处：www.tangshuang.neto focus on business 本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】components’ de本文作者：唐霜，转载请注明出处。原创内容，盗版必究。v.

Diehard Immutable

To ensure my state c【转载请注明来源】【本文首发于唐霜的博客】hange as immutable, 【原创内容，转载请注明出处】未经授权，禁止复制转载。I have grown to be a未经授权，禁止复制转载。原创内容，盗版必究。 player of object-sp原创内容，盗版必究。【原创不易，请尊重版权】read(…). Let&#【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】8217;s look into a c【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】ase:

Eumm… Why shou【转载请注明来源】本文版权归作者所有，未经授权不得转载。ld I write so many &【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net#8230; and have to c【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】reate such a deep ne【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。sted repeated object转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net?

Magician Immer

Immer is a library which 【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】help developers to i【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。mmutablly modify obj转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】ect. It is amazing t未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】hat it provides only【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net 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【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】 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 著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】drop object-spread o【转载请注明来源】本文作者：唐霜，转载请注明出处。peration thanks for 本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netimmer, easy, clear a【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。nd magic.

New Generation

React hooks is a new【未经授权禁止转载】本文作者：唐霜，转载请注明出处。 way to penetrate ne【原创不易，请尊重版权】未经授权，禁止复制转载。sted components net.【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】 React-redux has pro原创内容，盗版必究。【本文受版权保护】vided a useSelector hook function to ge【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.nett state from global 【作者：唐霜】转载请注明出处：www.tangshuang.netstore. useContext give us a chance to【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。 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 本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netstate management is 【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。based on hooks. You 【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。may hear the new sta原创内容，盗版必究。【未经授权禁止转载】te manager Recoil which is published 【转载请注明来源】【版权所有】唐霜 www.tangshuang.netby a facebook team. 【本文受版权保护】【关注微信公众号：wwwtangshuangnet】In recoil, state and本文作者：唐霜，转载请注明出处。【作者：唐霜】 actions are abstrac【转载请注明来源】未经授权，禁止复制转载。t as atoms, selector【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.nets.

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本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。t-redux but without 【本文受版权保护】【转载请注明来源】reducers. Let’转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】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【本文受版权保护】【关注微信公众号：wwwtangshuangnet】l dispatch which is based on i【原创不易，请尊重版权】未经授权，禁止复制转载。mmer and make state 【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】change clear, conven【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。ient and comfortable【原创不易，请尊重版权】未经授权，禁止复制转载。.

This is a typical us转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。age of react-immut, 著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。you can learn more f【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。rom repo. If you think this is著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。 cool, give me a sta未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】r!

Summary

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

2020-09-09 3215