Redux全家桶out，轻量级hook搞定状态管理

2023-09-29 18:32:30

Redux全家桶out，更轻量更简单的结构化hook帮你搞定状态管理
最近一段时间，国内社区基于 React hook 提炼出了一些用于代替 redux 的状态管理库，基本思路都是利用 hook 来包装 state 和操作 state 的一些方法，例如 hox。本文提到的结构化 structured-react-hook 也是其中一种思路。
structured-react-hook 是一款轻量级状态管理库，号称比redux全家桶(包含redux、redux-thunk、redux-saga以及redux-devtools)还要轻量，体积只有3KB。同时，它提供了更好的性能和更佳的开发体验，能够帮助开发者轻松管理复杂的状态。

为什么要使用structured-react-hook?

抛弃 Redux 全家桶的臃肿

Redux全家桶虽然功能强大，但过于臃肿，对于一些中小型项目而言，完全没有必要引入如此重量级的状态管理方案。structured-react-hook 的体积只有 3KB，仅为 Redux 全家桶的 1/10，能够有效减轻项目负担。

告别嵌套组件的痛苦

Redux 的嵌套组件问题一直为人诟病。当组件层级较深时，状态管理变得极为困难。structured-react-hook 巧妙地利用了 Context API，实现了状态的跨组件共享，彻底解决了嵌套组件带来的困扰。

性能优于 Redux

得益于 Context API 的高效，structured-react-hook 在性能方面优于 Redux。在实际应用中，structured-react-hook 的性能提升可达 20% 以上，有效提升了应用的响应速度和用户体验。

structured-react-hook 的使用

structured-react-hook 的使用非常简单，只需引入库并创建 store 即可。

import { createStore } from 'structured-react-hook'

const store = createStore({
  state: {
    count: 0
  },
  actions: {
    increment: ({ state }) => {
      state.count++
    }
  }
})

然后，可以在组件中使用 useStore hook 来获取 store：

import { useStore } from 'structured-react-hook'

const MyComponent = () => {
  const store = useStore()
  const count = store.getState().count
  const increment = store.getActions().increment

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}