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

【作者：唐霜】原创内容，盗版必究。【关注微信公众号：wwwtangshua【关注微信公众号：wwwtangshuangnet】【作者：唐霜】ngnet】

I have used react an【原创不易，请尊重版权】【版权所有，侵权必究】d react-redux for a 【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】long time. During la转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】st 2 years, I found 【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】it is so complex whe【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。n I want to find out【关注微信公众号：wwwtangshuangnet】【本文受版权保护】 a single data flow 转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netfrom a dispatcher to【版权所有，侵权必究】转载请注明出处：www.tangshuang.net usage through over 【本文受版权保护】【原创内容，转载请注明出处】than 5 files that I 本文作者：唐霜，转载请注明出处。【未经授权禁止转载】am now boring with r【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netedux’s reducer【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。 and sync operation 转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。which makes async op【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。eration evil. I have未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。 been thinking about著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。 building my own rea【转载请注明来源】【原创内容，转载请注明出处】ct global state mana【版权所有】唐霜 www.tangshuang.net【转载请注明来源】ger 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转载请注明出处：www.tangshuang.net【转载请注明来源】 way data flow and i本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。mmutable state circu【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】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转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。 update a component&未经授权，禁止复制转载。【本文首发于唐霜的博客】#8217;s props, we wi【原创不易，请尊重版权】未经授权，禁止复制转载。ll propagate the eve【原创不易，请尊重版权】【原创内容，转载请注明出处】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【本文受版权保护】转载请注明出处：www.tangshuang.netf no-use-pipe props.

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

Global state manager【作者：唐霜】未经授权，禁止复制转载。 make it much more c【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】lear in deep nested 原创内容，盗版必究。【本文受版权保护】components net. Ever著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。y 2 components no ma原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。tter how many levels【转载请注明来源】【版权所有，侵权必究】 space are there bet【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netween them, they can 【版权所有】唐霜 www.tangshuang.net【本文受版权保护】communicate with eac转载请注明出处：www.tangshuang.net原创内容，盗版必究。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【作者：唐霜】 a angel has past, a转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。long with code incre本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netasing, redux reducer转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。 and action function【未经授权禁止转载】本文作者：唐霜，转载请注明出处。s make us headache. 【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netWhy should I write s【转载请注明来源】转载请注明出处：www.tangshuang.neto much non-real-rela【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netted code? Our purpos【本文受版权保护】未经授权，禁止复制转载。es is to finish UI b著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。uilding more quickly【作者：唐霜】【版权所有】唐霜 www.tangshuang.net, but redux slow us 未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netdown like a stumblin转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】g block. And when I 本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】debug, I have to jum【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。p amoung files to fi【未经授权禁止转载】【本文首发于唐霜的博客】nd out why the data 【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】has changed to make 【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。error. If you give m著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.nete a knife, I will pa【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。ss it to redux.

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

Yes, we get one way 【本文首发于唐霜的博客】【未经授权禁止转载】data flow, but we ha转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。ve to code here, her转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】e and here…

And I must combine t【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 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原创内容，盗版必究。 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, 著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。I have grown to be a【版权所有】唐霜 www.tangshuang.net【作者：唐霜】 player of object-sp【作者：唐霜】【作者：唐霜】read(…). Let&#【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】8217;s look into a c【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。ase:

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

Magician Immer

Immer is a library which 本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】help developers to i本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】mmutablly modify obj【版权所有】唐霜 www.tangshuang.net【作者：唐霜】ect. It is amazing t未经授权，禁止复制转载。未经授权，禁止复制转载。hat it provides only【本文首发于唐霜的博客】【原创不易，请尊重版权】 one API produce function:

import produce from 'immer'

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

From now on, I will 本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】drop object-spread o转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】peration thanks for 【未经授权禁止转载】本文作者：唐霜，转载请注明出处。immer, easy, clear a【转载请注明来源】转载请注明出处：www.tangshuang.netnd magic.

New Generation

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

Generation 2 global 未经授权，禁止复制转载。【未经授权禁止转载】state management is 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。based on hooks. You 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。may hear the new sta原创内容，盗版必究。原创内容，盗版必究。te manager Recoil which is published 著作权归作者所有，禁止商业用途转载。【作者：唐霜】by a facebook team. 【版权所有】唐霜 www.tangshuang.net【转载请注明来源】In recoil, state and【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】 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【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】tate manager and has【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】 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【作者：唐霜】本文作者：唐霜，转载请注明出处。l dispatch which is based on i【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】mmer and make state 转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netchange clear, conven著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】ient and comfortable本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net.

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

2020-09-09 3047