Stook：极简主义的 React 状态管理库

从 Hooks 提及

一年前，2018 年 9 月左右, React hooks 刚发布，那时 hooks 还不是稳定 Api，只能在 16.7.0-alpha.0 版本能用。那时我就预感到，基于 hooks 状态管理解决方案会逐渐崛起，当时我基于 hooks 建立一个我认为理想的状态管理库：stamen。

我还写过一篇文章介绍它：多是基于 Hooks 和 Typescript 最好的状态管理工具。

回顾 Stamen

我以前说过，我想要这样的一个状态管理库：

• 简单易用，而且适合中大型项目
• 完美地支持 Typescript

因此我建立了 Stamen，Stamen 相比 Redux 更加简洁，对 TypeScript 支持度更好。一年多过去了，也在几个小项目中实践过，发现并无很好知足个人两个指望。

Stamen 的 Api 借鉴了 dva 和 rematch，致使了它没有脱离 Redux 的影子，依然有 state、reducers、effects、dispatch、selector 等概念，能够说没有完全 Hooks 化，特别是 reducers 处理同步和 effects 处理反作用让我以为特别扭。

一年后，我建立了更加完全 Hooks 化的状态管理库：Stook。

关于 Stook

Stook，中文翻译是谷堆，命名灵感来自 store、hooks 两个单词的组合，一个极简主义的 React 状态管理库。

基本用法

咱们看看 Stook 用法有多么的简单，下面是一个经典的 Counter 组件，展现了 stook 的最基本用法:

import React from "react";
import { useStore } from "stook";

function Counter() {
  const [count, setCount] = useStore("Counter", 0);
  return (
    <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div>
  );
}
复制代码

Stook 最核心的 Api 就是 useStore，也许你发现了，它和 useState 很是像，实际上，useStore 除了多了一个参数之外，其余用法如出一辙。

Stook 极简之处在于它的用法跟 usState 几乎一致，学习成本几乎能够忽略，更多的学习成本在于 React Hooks 的掌握和理解，通过一年多，Hooks 已经逐渐在 React 社区中获得承认，相信之后 Hooks 将是每一个 React 开发者的基本技能。

状态共享

对于状态管理，最核心的功能就是状态的跨组件通讯。useState 用于管理单一组件内的状态，useStore 则能够跨组件管理整个应用的状态。

下面展现了如何多个组件如何共享状态：

import React from "react";
import { useStore } from "stook";

function Counter() {
  const [count, setCount] = useStore("Counter", 0);
  return (
    <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div>
  );
}

function Display() {
  const [count] = useStore("Counter");
  return <p>{count}</p>;
}

function App() {
  return (
    <div> <Counter /> <Display /> </div>
  );
}
复制代码

在这个例子中，咱们能够看到，要共享状态，只需使用 useStore 订阅同一个 key 便可，很是简单。能够说，只要你学会了 useState，也就学会了 useStore，只要你学会了 useStore，你就学会了 React 的状态管理。

自定义 Hooks

为了能使组件和状态管理逻辑分离，强烈建议使用自定义 hooks 管理状态，好比说你要管理 Counter 的状态，那就是自定义一个叫 useCounter 的 hooks，而后在各组件中使用 useCounter()， 而不是直接使用 useStore('Counter')。

示例：

import React from "react";
import { useStore } from "stook";

function useCounter() {
  const [count, setCount] = useStore("Counter", 0);
  const decrease = () => setCount(count - 1);
  const increase = () => setCount(count + 1);
  return { count, increase, decrease };
}

function Display() {
  const { count } = useCounter();
  return <div>{count}</div>;
}

function Increase() {
  const { increase } = useCounter();
  return <buttun onClick={increase}>+</buttun>;
}

function Decrease() {
  const { decrease } = useCounter();
  return <buttun onClick={decrease}>-</buttun>;
}

export default function App() {
  return (
    <div> <Decrease /> <Display /> <Increase /> </div>
  );
}
复制代码

上面三个子组件，都用到了 useCounter，它们实现了状态共享。

自定义 Hooks 是最佳实践，强烈建议在业务中都使用自定义 Hooks。

Api

Stook 的核心很是简洁，核心 Api 就 useStore 一个，所有 Api 也就 3 个：

• useStore - 查看详情
• mutate - 查看详情
• getState - 查看详情

单元测试

测试 stook 是一件很是简单的事，由于测试 stook 也就是在测试 react hooks。

推荐使用 react-hooks-testing-library工具来测试 stook。

安装依赖

npm install -D @testing-library/react-hooks react-test-renderer
复制代码

例子

useCounter.ts

function useCounter() {
  const [count, setCount] = useStore("Counter", 0);
  const decrease = () => setCount(count - 1);
  const increase = () => setCount(count + 1);
  return { count, increase, decrease };
}
复制代码

useCounter.test.ts

import { renderHook, act } from "@testing-library/react-hooks";
import useCounter from "./useCounter";

test("should increment counter", () => {
  const { result } = renderHook(() => useCounter());

  act(() => {
    result.current.increase();
  });

  expect(result.current.count).toBe(1);
});
复制代码

更多的测试技巧请看：react-hooks-testing-library。

调试

为了更好的编程体验，Stook 支持使用 Redux DevTools 调试。

安装 Redux DevTools extension

若是你未安装 Redux DevTools extension，请安装相应浏览器的插件：Redux DevTools。

Setup

使用 devtools 很是简单，先安装 stook-devtools 包：

npm i stook-devtools
复制代码

而后在项目代码中进入，并初始化：

import { devtools } from "devtools";

devtools.init();
复制代码

若是你不想在生产环境引入：

import { devtools } from "devtools";

if (process.env.NODE_ENV !== "production") {
  devtools.init();
}
复制代码

效果

生效后，能够在浏览器的 Redux DevTools extension 看到整个应用的 state 状态：

总结

Stook 的理念和传统的状态管理方案不一样，没有明确的 Action 的概念。事实上，它的理念跟 React 的 useState是相似的，推崇的是：一个 Hooks，一个 state，一个 action。Stook 建议把状态分拆，变成一个个 Hooks，而后就变成 [state, setState]。

更多关于 Stook 的用法，请看 Github: Stook。