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

未经授权，禁止复制转载。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

I have used react an【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】d react-redux for a 本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】long time. During la转载请注明出处：www.tangshuang.net【版权所有，侵权必究】st 2 years, I found 【作者：唐霜】原创内容，盗版必究。it is so complex whe原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netn I want to find out【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。 a single data flow 【本文受版权保护】【转载请注明来源】from a dispatcher to著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。 usage through over 【转载请注明来源】未经授权，禁止复制转载。than 5 files that I 原创内容，盗版必究。【未经授权禁止转载】am now boring with r本文版权归作者所有，未经授权不得转载。【作者：唐霜】edux’s reducer本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】 and sync operation 转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。which makes async op转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】eration evil. I have【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】 been thinking about【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net building my own rea【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】ct global state mana未经授权，禁止复制转载。【未经授权禁止转载】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【作者：唐霜】原创内容，盗版必究。 way data flow and i原创内容，盗版必究。【原创内容，转载请注明出处】mmutable state circu未经授权，禁止复制转载。【本文受版权保护】lation. In ideal, ou【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】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【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netll propagate the eve未经授权，禁止复制转载。【作者：唐霜】nt back to the root 【原创内容，转载请注明出处】【原创不易，请尊重版权】parent to change the【本文受版权保护】【未经授权禁止转载】 parent’s stat【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.nete 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【本文受版权保护】【本文首发于唐霜的博客】tecture which guide 【作者：唐霜】【转载请注明来源】us to build global s【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。tate manager. Redux 【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。(react-redux) become【未经授权禁止转载】【原创内容，转载请注明出处】 the most popular gl原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。obal state manager. 【转载请注明来源】著作权归作者所有，禁止商业用途转载。The state data flow 【版权所有】唐霜 www.tangshuang.net【转载请注明来源】pattern switch to cr【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】ossing components【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net217; level like this【版权所有】唐霜 www.tangshuang.net【本文受版权保护】:

Global state manager本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net make it much more c【作者：唐霜】【本文受版权保护】lear in deep nested 原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。components net. Ever未经授权，禁止复制转载。【版权所有，侵权必究】y 2 components no ma转载请注明出处：www.tangshuang.net【作者：唐霜】tter how many levels著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。 space are there bet未经授权，禁止复制转载。【版权所有，侵权必究】ween them, they can 【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netcommunicate with eac本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】h other by two step 【未经授权禁止转载】【本文首发于唐霜的博客】with redux as a midd著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。leman.

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转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】 and action function本文作者：唐霜，转载请注明出处。【本文受版权保护】s make us headache. 【未经授权禁止转载】转载请注明出处：www.tangshuang.netWhy should I write s【原创内容，转载请注明出处】【本文首发于唐霜的博客】o much non-real-rela【本文首发于唐霜的博客】未经授权，禁止复制转载。ted code? Our purpos转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】es is to finish UI b【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。uilding more quickly【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】, 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 未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.nethas changed to make 本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。error. If you give m著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】e a knife, I will pa【原创内容，转载请注明出处】【版权所有，侵权必究】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转载请注明出处：www.tangshuang.net【版权所有，侵权必究】ve to code here, her转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。e and here…

And I must combine t未经授权，禁止复制转载。原创内容，盗版必究。hese all parts toget转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.nether 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, 【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netI have grown to be a【原创不易，请尊重版权】【未经授权禁止转载】 player of object-sp【本文受版权保护】【版权所有】唐霜 www.tangshuang.netread(…). Let&#【版权所有】唐霜 www.tangshuang.net【转载请注明来源】8217;s look into a c原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netase:

Eumm… Why shou【原创不易，请尊重版权】【作者：唐霜】ld I write so many &【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】#8230; and have to c【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。reate such a deep ne本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】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【转载请注明来源】【版权所有】唐霜 www.tangshuang.net 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本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】ust a draft, the out【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netput next is a new object whi【转载请注明来源】未经授权，禁止复制转载。ch is from prev.

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

New Generation

React hooks is a new【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】 way to penetrate ne【原创内容，转载请注明出处】【作者：唐霜】sted components net.【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net React-redux has pro转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netvided a useSelector hook function to ge转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】t state from global 【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】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【原创内容，转载请注明出处】【本文首发于唐霜的博客】ope.

Generation 2 global 【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】state management is 【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】based on hooks. You 【转载请注明来源】本文版权归作者所有，未经授权不得转载。may hear the new sta未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。te manager Recoil which is published 【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。by a facebook team. 【转载请注明来源】著作权归作者所有，禁止商业用途转载。In recoil, state and【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】 actions are abstrac未经授权，禁止复制转载。【未经授权禁止转载】t as atoms, selector本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。s.

Decent ReactImmut

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

This is a typical us【本文受版权保护】未经授权，禁止复制转载。age of react-immut, 【作者：唐霜】【本文首发于唐霜的博客】you can learn more f【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。rom repo. If you think this is【原创不易，请尊重版权】【本文首发于唐霜的博客】 cool, give me a sta【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】r!

Summary

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

2020-09-09 3217