在 Dev.to 上面发的这篇文章，简单著作权归作者所有，禁止商业用途转载。【本文受版权保护】描述了 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 【作者：唐霜】【本文受版权保护】it is so complex whe本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netn I want to find out【原创内容，转载请注明出处】【本文受版权保护】 a single data flow 【版权所有】唐霜 www.tangshuang.net【作者：唐霜】from a dispatcher to【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】 usage through over 本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】than 5 files that I 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netam now boring with r原创内容，盗版必究。【转载请注明来源】edux’s reducer【原创不易，请尊重版权】【转载请注明来源】 and sync operation 【转载请注明来源】【转载请注明来源】which makes async op【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.neteration evil. I have【关注微信公众号：wwwtangshuangnet】【关注微信公众号：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【关注微信公众号：wwwtangshuangnet】

In the ecology of re本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。act, we advocate one未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。 way data flow and i本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】mmutable state circu本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】lation. In ideal, ou【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】r state flow is like【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】 this:

However, UX handler 转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。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【作者：唐霜】【未经授权禁止转载】ll propagate the eve本文版权归作者所有，未经授权不得转载。【本文受版权保护】nt back to the root 【原创不易，请尊重版权】【本文受版权保护】parent to change the【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】 parent’s stat【作者：唐霜】【版权所有】唐霜 www.tangshuang.nete to trigger UI rere转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】nder. This make nest【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】ed components full o【版权所有，侵权必究】【本文受版权保护】f no-use-pipe props.

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

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

Evil Reducer【访问 www.tangshuang.net 获取更多精彩内容】

The time in which re【原创内容，转载请注明出处】【作者：唐霜】ducer was treated as【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】 a angel has past, a【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】long with code incre本文版权归作者所有，未经授权不得转载。【本文受版权保护】asing, redux reducer【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net and action function【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。s make us headache. 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netWhy should I write s【转载请注明来源】【原创不易，请尊重版权】o much non-real-rela转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。ted code? Our purpos原创内容，盗版必究。【原创不易，请尊重版权】es is to finish UI b【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】uilding more quickly【本文受版权保护】转载请注明出处：www.tangshuang.net, 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 【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。error. If you give m本文作者：唐霜，转载请注明出处。【作者：唐霜】e a knife, I will pa转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。ss 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著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。ve to code here, her【作者：唐霜】未经授权，禁止复制转载。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【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。 fragility!

In fact, I do want t【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。o focus on business 本文作者：唐霜，转载请注明出处。【本文受版权保护】components’ de【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】v.

Diehard Immutable原创内容，盗版必究。

To ensure my state c【未经授权禁止转载】【作者：唐霜】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.netase:

Eumm… Why shou【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】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【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】ect. It is amazing t【关注微信公众号：wwwtangshuangnet】【本文受版权保护】hat it provides only【访问 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【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。ter, it looks like a本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】 mutable operation, 【版权所有，侵权必究】【本文首发于唐霜的博客】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 转载请注明出处：www.tangshuang.net原创内容，盗版必究。drop object-spread o【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】peration thanks for 【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netimmer, easy, clear a本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。nd magic.

New Generation本文作者：唐霜，转载请注明出处。

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

Decent ReactImmut未经授权，禁止复制转载。

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

This is a typical us【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。age of react-immut, 著作权归作者所有，禁止商业用途转载。【作者：唐霜】you can learn more f原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netrom repo【关注微信公众号：wwwtangshuangnet】. 【关注微信公众号：wwwtangshuangnet】If you think this is【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net cool, give me a sta【未经授权禁止转载】【作者：唐霜】r!

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

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

2020-09-09 2917