研究状态管理也算不短时间，对状态管理的本【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net质也渐渐有了自己的认识。在状态管理器领域【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】，有两大流派，即以 redux 为代表的【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】 immutable 流派和以 mobx原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。 为代表的 mutable 流派。从数据【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。流的纯粹性讲，我们更喜欢 immutab【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。le，但从写代码的便捷性讲，我们更喜欢 【转载请注明来源】转载请注明出处：www.tangshuang.netmutable。基于这种主观上的意愿，i【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。mmer 这个工具诞生了。它以极简主义的【版权所有】唐霜 www.tangshuang.net【作者：唐霜】方式，为我们提供了以 mutable 的原创内容，盗版必究。本文作者：唐霜，转载请注明出处。形式修改，但得到一个 immutable原创内容，盗版必究。本文作者：唐霜，转载请注明出处。 的结果的状态操作形式，从代码量上极速降【本文受版权保护】转载请注明出处：www.tangshuang.net低工程复杂度。基于 immer，我撰写了【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net新的 react 全局状态管理器 rea转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netct-immut，源码只有 150 行左本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。右，却完成了 redux, react-【本文首发于唐霜的博客】原创内容，盗版必究。redux 的所有工作，甚至你不需要再考【版权所有，侵权必究】【转载请注明来源】虑 redux-thunk 这类用于异步【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。操作的第三方库。

【版权所有】唐霜 www.tangshuang.net【转载请注明来源】原创内容，盗版必究。

和 react-redux 几乎一致的接【本文受版权保护】本文版权归作者所有，未经授权不得转载。口

【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。转载请注明出处：www.tangshuang.net

react-redux 已经被反复证明是【作者：唐霜】本文作者：唐霜，转载请注明出处。最被 react 开发者熟知的状态管理器【转载请注明来源】原创内容，盗版必究。连接工具，因此我所采用的方式和 reac转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.nett-redux 几乎一模一样。让我们来看【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。看它的最直接的使用方法：

【未经授权禁止转载】【作者：唐霜】【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。

import { createStore, Provider } from 'react-immut'

const store = createStore({
  name: 'timy',
  age: 10,
})

export function App() {
  return (
    <Provider store={store}>
      ...
    </Provider>
  )
}

上面就是我们整个应用的骨架代码。和 re【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。dux 完全不同，我们不需要写一大堆 r【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】educer 代码，而是只需要将初始状态著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】传入即可，正是因为如此，我们的代码量瞬间【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。少了无数行。

本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。

在具体组件中，我们也使用 connect本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。 进行连接。

【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。

import { connect } from 'react-immut'

const mapStateToProps = (state) => {
  const { name, age } = state
  return { name, age }
}

const mapDispatchToProps = (dispatch) => {
  // 这里的 dispatch 就和 react-redux 完全不同了
  const changeName = (name) => dispatch('name', name)
  const changeAge = (age) => dispatch('age', age)
  // 和 react-redux 不同，react-immut 不会主动注入 dispatch 到组件中
  return { changeName, changeAge }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

function MyComponent(props) {
  const { name, age, changeName, changeAge } = props
  // ...
}

到目前为止从代码层面，几乎极容易理解，没原创内容，盗版必究。未经授权，禁止复制转载。有任何难度。

【原创不易，请尊重版权】【版权所有，侵权必究】【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】

神奇的 dispatch 方法本文作者：唐霜，转载请注明出处。

本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

和 redux 通过 dispatch 转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netaction 不同，react-immu本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。t 的 dispatch 是一个神奇的方【作者：唐霜】原创内容，盗版必究。法，它可以让我们实现极简的编程体验。上文本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。红色代码已经见过了 dispatch 的【版权所有】唐霜 www.tangshuang.net【本文受版权保护】方便之处。接下来，我们将会看到一些神奇的原创内容，盗版必究。【原创内容，转载请注明出处】事要发生。

转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】

> dispatch(keyPath, value)

这里的 keyPath 可不是单纯的属性本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net名，而是一个属性路径。我们来看看具体用法著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。：

著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】

dispatch('parent.child', 'new value')
dispatch('books[0].title', 'new title')
dispatch(['root', symbol], Symbol())

你看，它的变化形式真是多样。【版权所有，侵权必究】

未经授权，禁止复制转载。【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。

> dispatch(keyPath, prev => next?)

第二个参数是一个函数，它接收当前值，返回转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】新值。这就好玩了，我们可以发挥很多想法了原创内容，盗版必究。原创内容，盗版必究。。

【版权所有】唐霜 www.tangshuang.net【转载请注明来源】转载请注明出处：www.tangshuang.net

dispatch('name', name => {
  return name === 'tomy' ? name : 'gage'
})
dispatch('some', some => {
  some.child.name = 'some'
  some.child.age = 10
})

不一样的事情终于发生了。这里，红色的代码本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】显得格外刺眼，如果在传统的 immuta【本文受版权保护】本文版权归作者所有，未经授权不得转载。ble 系统中，我们是不允许这样写的，但著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】是，在 react-immut 中，它是原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net最好的写法。试着想想，如果放到以前，为了未经授权，禁止复制转载。【原创内容，转载请注明出处】 immutable，你可能必须这样操作【作者：唐霜】【本文首发于唐霜的博客】：

【版权所有，侵权必究】【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net

dispatch('some', some => {
  return {
    ...some,
    child: {
      ...some.child,
      name: 'some',
      age: 10,
    },
  }
})

看，多么麻烦。如果再多几层，混杂对象和数原创内容，盗版必究。原创内容，盗版必究。组，那会是令人抓狂的一个操作。但是，基于转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】 immer，我们只需要像前面的示例代码本文版权归作者所有，未经授权不得转载。【本文受版权保护】一样写，直接修改对象属性值，就可以了，而著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】且，最终，你得到的状态是 immutab原创内容，盗版必究。转载请注明出处：www.tangshuang.netle 的，这个操作不会带来对象被修改的结【未经授权禁止转载】本文作者：唐霜，转载请注明出处。果，放心使用吧。

【本文受版权保护】【本文首发于唐霜的博客】【转载请注明来源】转载请注明出处：www.tangshuang.net

> dispatch(prev => next?)

不传入 keyPath，那么可以直接获得著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net整个应用的 state。

【转载请注明来源】本文版权归作者所有，未经授权不得转载。【本文受版权保护】

dispatch(state => {
  state.name = 'tomy'
})

是否返回 next 是很关键的，如果返回【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】 next，那么会用 next 替换 p【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。rev 的地位，但是必须注意，next 【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net和 prev 的数据类型必须一直，都是 著作权归作者所有，禁止商业用途转载。【本文受版权保护】‘object’【转载请注明来源】【版权所有，侵权必究】 （对象或数组）。而 immer 的最佳【转载请注明来源】【原创不易，请尊重版权】实践，反而是不返回任何内容，不返回内容，【本文首发于唐霜的博客】未经授权，禁止复制转载。恰恰可以让我们更清楚知道，哪些值被修改。

【作者：唐霜】本文版权归作者所有，未经授权不得转载。【作者：唐霜】

使用 Hooks未经授权，禁止复制转载。

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。原创内容，盗版必究。

都 2020 了，hooks 当然不能少【作者：唐霜】转载请注明出处：www.tangshuang.net。使用 hooks 方法 useStor本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.nete 可以省略 connect 的步骤，简【本文受版权保护】未经授权，禁止复制转载。化代码。

【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】【作者：唐霜】

import { useStore } from 'react-immut'

function MyComponent() {
  const [state, dispatch] = useStore() // 获得整个应用的 state 和 dispatch 方法
}

需要注意的是，useStore 基于 c转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netontext，也就是说，你必须在 Pro【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。vider 内部使用 useStore。【未经授权禁止转载】【本文首发于唐霜的博客】这样获取全局状态，完全不需要 conne【转载请注明来源】【本文受版权保护】ct 了，是不是感觉飞起来呢？

著作权归作者所有，禁止商业用途转载。【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】

Combined Store【作者：唐霜】

转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。

很多情况下，我们常常会对我们的状态进行分【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】区，每一个独立分区，我们称之为 name【作者：唐霜】著作权归作者所有，禁止商业用途转载。space。我们倾向于将关于一个业务组件【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。的所有代码文件放在同一个文件夹下面组织，【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】这样有利于我们更好的管理同一个业务组件相【转载请注明来源】【本文首发于唐霜的博客】关的所有代码。为了方便这种场景，我们提供【关注微信公众号：wwwtangshuangnet】【本文受版权保护】了一种 combined store，通【本文受版权保护】【版权所有，侵权必究】过 namespace 的方式组织全局状【作者：唐霜】本文版权归作者所有，未经授权不得转载。态。

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。

// components/a-some/store.js
export const state = { // state 是必须的
  name: 'Tom',
  age: 10,
}

export function changeName(dispatch, name) { // 定义一些方法
  dispatch(state => { // 这个 state 指向的是这个局部 state，而非全局 state，也就是说，在该文件内，只能修改该命名空间内的 state，而无法修改其他空间的 state
    state.name = name
  })
}

export function changeAge(dispatch, age) {
  dispatch(state => {
    state.age = age
  })
}

接下来，我们使用这个定义好的文件【作者：唐霜】

【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。【原创内容，转载请注明出处】

// app.js
import { createStore } from 'react-immut'
import * as Asome from './components/a-some/store.js'

// 传入第二个参数，第二个参数的结构如下
const store = createStore(null, {
  Asome, // 使用 'Asome' 作为命名空间名称
  // 这里可以引入其他命名空间
})

export default function App() {
  return (
    <Provider store={store}>
      ...
    </Provider>
  )
}

在具体的组件中，通过 key 读取命名空【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net间（本质上和从全局 state 上读取没转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。有差别）。

【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】

function MyComponent() {
  const [{ name, age }, { changeName, changeAge }] = useStore('Asome')
  // ...
}

combine 本质上干了两件事，一是把【转载请注明来源】【原创不易，请尊重版权】结构化的对象解析出来创建 store，二【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。是解析出来命名空间上的方法，把这些方法添【版权所有，侵权必究】原创内容，盗版必究。加到 dispatch 上。虽然 dis未经授权，禁止复制转载。【原创内容，转载请注明出处】patch 是一个函数，但是由于在 js【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。 语言中，函数的本质也是对象，所以，可以本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】给函数添加属性，这样，当使用 combi本文版权归作者所有，未经授权不得转载。【本文受版权保护】ned store 之后，可以在这个函数原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。上增加命名空间属性，让开发者可以方便的读【版权所有，侵权必究】转载请注明出处：www.tangshuang.net取定义好的方法。

【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net

const mapDispatchToProps = (dispatch) => {
  const { changeName, changeAge } = dispatch.Asome
  return { changeName, changeAge }
}

异步本文版权归作者所有，未经授权不得转载。

【未经授权禁止转载】【原创内容，转载请注明出处】【版权所有，侵权必究】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net

和 redux 最大的不同在于，我们没有【转载请注明来源】【关注微信公众号：wwwtangshuangnet】 reducer，因此我们对 state著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】 的操作都是外部实现的，而非 store原创内容，盗版必究。【本文首发于唐霜的博客】 内部定义的。只要我们能调用到 disp本文版权归作者所有，未经授权不得转载。【本文受版权保护】atch，我们就可以修改 state。因转载请注明出处：www.tangshuang.net【转载请注明来源】此，异步操作实在是太简单了。

原创内容，盗版必究。原创内容，盗版必究。未经授权，禁止复制转载。原创内容，盗版必究。【本文受版权保护】

export function saveName(dispatch, name) {
  fetch('...', { method: 'POST', body: JSON.stringify({ name }) })
    .then(res => res.json())
    .then(data => {
      dispatch(state => {
        state.name = data.name
      })
    })
}

无论在组件内部，还是在 connect 【本文首发于唐霜的博客】【本文受版权保护】的 mapDispatchToProps转载请注明出处：www.tangshuang.net【本文受版权保护】 函数中，还是在命名空间定义的方法中，我转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。们都可以调用 dispatch 来实现这本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。个效果。

【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net

结束语【关注微信公众号：wwwtangshuangnet】

【本文受版权保护】【作者：唐霜】【作者：唐霜】【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】

本文介绍了 react-immut 的用【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】法，它利用 immer 的超能力，实现极原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。其方便的全局状态更新，设计上又和 rea原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ct-redux 相同，让开发者可以没有【原创不易，请尊重版权】【原创内容，转载请注明出处】太大的门槛切换。而且，它的源码只有 15未经授权，禁止复制转载。【原创不易，请尊重版权】0 行左右，没有复杂的魔法，踏踏实实写的【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。，你可以在这里转载请注明出处：www.tangshuang.net读到它的源码。利用 immutable 本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。的特性，我们可以做任何 redux 能做未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。的事情，例如时间旅行等。不再需要样板代码【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net，我们为什么还非得要 redux 呢？

【本文受版权保护】转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。

2020-09-04 3263