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

【作者：唐霜】转载请注明出处：www.tangshua【转载请注明来源】【作者：唐霜】ng.net

I have used react an原创内容，盗版必究。【本文受版权保护】d react-redux for a 【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。long time. During la【未经授权禁止转载】本文作者：唐霜，转载请注明出处。st 2 years, I found 【本文受版权保护】【关注微信公众号：wwwtangshuangnet】it is so complex whe【转载请注明来源】本文版权归作者所有，未经授权不得转载。n 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 【作者：唐霜】【本文首发于唐霜的博客】am now boring with r本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。edux’s reducer原创内容，盗版必究。原创内容，盗版必究。 and sync operation 【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。which makes async op未经授权，禁止复制转载。原创内容，盗版必究。eration evil. I have【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】 been thinking about本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】 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

In the ecology of re【原创内容，转载请注明出处】【原创内容，转载请注明出处】act, we advocate one【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。 way data flow and i【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】mmutable state circu本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】lation. In ideal, ou【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。r state flow is like【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】 this:

However, UX handler 【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netwill push data back,【原创不易，请尊重版权】【未经授权禁止转载】 so it comes to be a本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】 circle like this:

Each time we want to【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】 update a component&原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。#8217;s props, we wi【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。ll propagate the eve转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netnt 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【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】l propose flux archi转载请注明出处：www.tangshuang.net【未经授权禁止转载】tecture which guide 【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。us to build global s【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】tate manager. Redux 著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。(react-redux) become未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。 the most popular gl本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】obal state manager. 【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。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【转载请注明来源】【转载请注明来源】y 2 components no ma【本文首发于唐霜的博客】【本文受版权保护】tter how many levels【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。 space are there bet【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】ween them, they can 【版权所有】唐霜 www.tangshuang.net【转载请注明来源】communicate with eac本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】h other by two step 本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。with redux as a midd【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】leman.

Evil Reducer

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

Let’s look int【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.neto what we will have 转载请注明出处：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【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】e and here…

And I must combine t【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】hese all parts toget原创内容，盗版必究。【本文首发于唐霜的博客】her and must make th【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。em work well without【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。 any error.

Too many parts cause【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。 fragility!

In fact, I do want t著作权归作者所有，禁止商业用途转载。【作者：唐霜】o focus on business 【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netcomponents’ de著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。v.

Diehard Immutable

To ensure my state c著作权归作者所有，禁止商业用途转载。【本文受版权保护】hange as immutable, 【原创内容，转载请注明出处】【版权所有，侵权必究】I have grown to be a原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。 player of object-sp著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。read(…). Let&#【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】8217;s look into a c【作者：唐霜】【本文受版权保护】ase:

Eumm… Why shou著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netld I write so many &本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】#8230; and have to c【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netreate such a deep ne转载请注明出处：www.tangshuang.net【未经授权禁止转载】sted repeated object本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】?

Magician Immer

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

From now on, I will 【本文受版权保护】著作权归作者所有，禁止商业用途转载。drop object-spread o【作者：唐霜】【原创不易，请尊重版权】peration thanks for 本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】immer, easy, clear a转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】nd magic.

New Generation

React hooks is a new【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】 way to penetrate ne【原创不易，请尊重版权】【原创不易，请尊重版权】sted components net.未经授权，禁止复制转载。【本文受版权保护】 React-redux has pro原创内容，盗版必究。原创内容，盗版必究。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转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。or use to use [state, dispatch] pattern in local sc转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。ope.

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

This is a typical us【原创不易，请尊重版权】【原创内容，转载请注明出处】age of react-immut, 转载请注明出处：www.tangshuang.net原创内容，盗版必究。you can learn more f【版权所有，侵权必究】【作者：唐霜】rom repo. If you think this is【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。 cool, give me a sta本文作者：唐霜，转载请注明出处。原创内容，盗版必究。r!

Summary

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

2020-09-09 3044