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

本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【本文受版权保护】

I have used react an【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。d react-redux for a 【转载请注明来源】转载请注明出处：www.tangshuang.netlong time. During la【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netst 2 years, I found 【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】it is so complex whe【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】n I want to find out著作权归作者所有，禁止商业用途转载。【转载请注明来源】 a single data flow 原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】from a dispatcher to本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。 usage through over 【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netthan 5 files that I 【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】am now boring with r本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】edux’s reducer本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。 and sync operation 著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】which makes async op【未经授权禁止转载】【原创不易，请尊重版权】eration evil. I have原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】 been thinking about【作者：唐霜】【未经授权禁止转载】 building my own rea【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】ct global state mana【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。ger and finally I bu本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】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【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net way data flow and i本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】mmutable state circu本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。lation. In ideal, ou【转载请注明来源】著作权归作者所有，禁止商业用途转载。r state flow is like【转载请注明来源】【版权所有，侵权必究】 this:

However, UX handler 原创内容，盗版必究。【原创内容，转载请注明出处】will push data back,【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】 so it comes to be a【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】 circle like this:

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

Global state manager【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。 make it much more c转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。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【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】h other by two step 本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。with redux as a midd【本文受版权保护】未经授权，禁止复制转载。leman.

Evil Reducer

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

Yes, we get one way 本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。data flow, but we ha【版权所有，侵权必究】【版权所有，侵权必究】ve to code here, her【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。e and here…

And I must combine t本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。hese all parts toget著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。her and must make th【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。em work well without转载请注明出处：www.tangshuang.net【作者：唐霜】 any error.

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

In fact, I do want t未经授权，禁止复制转载。【作者：唐霜】o focus on business 【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。components’ de原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。v.

Diehard Immutable

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

Eumm… Why shou【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。ld I write so many &本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】#8230; and have to c【原创不易，请尊重版权】原创内容，盗版必究。reate such a deep ne【本文首发于唐霜的博客】【转载请注明来源】sted repeated object【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。?

Magician Immer

Immer is a library which 原创内容，盗版必究。【未经授权禁止转载】help developers to i本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。mmutablly modify obj著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netect. It is amazing t【原创不易，请尊重版权】原创内容，盗版必究。hat it provides only本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】 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【版权所有】唐霜 www.tangshuang.netter, it looks like a【版权所有，侵权必究】转载请注明出处：www.tangshuang.net mutable operation, 【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】but in fact, it is j【版权所有】唐霜 www.tangshuang.net【转载请注明来源】ust a draft, the out【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netput next is a new object whi著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】ch is from prev.

From now on, I will 【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】drop object-spread o【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。peration thanks for 【作者：唐霜】【本文受版权保护】immer, easy, clear a未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。nd magic.

New Generation

React hooks is a new【关注微信公众号：wwwtangshuangnet】【转载请注明来源】 way to penetrate ne【转载请注明来源】【版权所有】唐霜 www.tangshuang.netsted 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【本文受版权保护】 siphon from top con【原创内容，转载请注明出处】【未经授权禁止转载】text. useReducer is a sample plate f【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netor use to use [state, dispatch] pattern in local sc转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ope.

Generation 2 global 【本文受版权保护】【作者：唐霜】state management is 【本文受版权保护】【未经授权禁止转载】based on hooks. You 【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。may hear the new sta【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】te manager Recoil which is published 本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】by a facebook team. 【本文受版权保护】【版权所有，侵权必究】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【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】t-redux but without 转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。reducers. Let’本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】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转载请注明出处：www.tangshuang.net easy? We have no ne本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ed to define reducer【未经授权禁止转载】【原创不易，请尊重版权】s, and has a powerfu【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】l dispatch which is based on i【转载请注明来源】原创内容，盗版必究。mmer and make state 本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。change clear, conven【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netient 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著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。 cool, give me a sta【未经授权禁止转载】【本文受版权保护】r!

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转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。l or local). We have【本文受版权保护】【本文首发于唐霜的博客】 followed immutable 【转载请注明来源】【原创内容，转载请注明出处】(redux) and mutable 【版权所有，侵权必究】【原创内容，转载请注明出处】(mobx) dispatching, 【本文受版权保护】【本文受版权保护】and now we are facin未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。g mutable-produce-im【关注微信公众号：wwwtangshuangnet】【本文受版权保护】mutable dispatching.【原创不易，请尊重版权】【作者：唐霜】 Which will you choo【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】se?

2020-09-09 3394