摆脱 Redux：我喜欢的 3 种状态管理工具

# Web 开发# 编程# React# 前端开发

让我们面对现实吧 - 多年来，Redux 一直是 React 状态管理的首选。虽然它非常适合处理大型应用程序中的复杂状态，但我经常发现自己淹没在样板代码中，并向新团队成员解释诸如 Reducer 和 Action 之类的概念。如果您正在寻找不同的方法，我有三个很棒的替代方案，它们可能会让您的下一个项目构建起来更加愉快。

现状：有意义的状态管理

我一尝试 Zustand（德语中“状态”的意思）就爱上了它。它就像是 Redux 节食了一次，然后又恢复了友好的性格。它有什么特别之处？它是围绕钩子构建的，这意味着你可以忘记我们多年来一直在编写的所有 Redux 样板。

以下是我真正欣赏 Zusand 的地方：

  • 它非常简单 - 你在一个地方定义你的状态和动作，不需要在文件之间跳转来追踪动作创建者
  • 它很小（压缩后约 2kB），但功能强大
  • 它与 React 的 hooks 和 context 配合得很好
  • 您仍然可以获得所有好东西，例如对持久性和日志记录等的中间件支持
  • 你不会被任何特定的模式所束缚——按照你想要的方式构建事物

    • 这是一个简单的例子，显示了 Zusand 有多干净：

    import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

function Counter() {
  const { count, increment } = useStore();
  return (
    
    
      
    Count: {count}
    
      
    
    
  );
}

    Nanostores：微型状态管理器

    说到微小，让我向你介绍 Nanostores。实际上，我在最近的项目 Happy Inbox 中就使用了它，它改变了游戏规则。Nanostores 鼓励你将事物分解成更小、更集中的部分，就像我们分解组件一样，而不是拥有一个庞大的状态存储（看着你，Redux）。

    Nanostores 让我兴奋的地方在于：

  • 它非常小 - 我们说的是 300 字节。这不是打字错误！
  • 原子方法意味着你可以用对你的应用真正有意义的方式组织状态
  • 重新渲染非常智能 - 组件只在需要时更新
  • 你不会被 React 束缚——它也可以与其他框架兼容
  • 如果你喜欢 TypeScript，那么它提供了很好的支持（我绝对喜欢）

    • 实际操作如下：

    import { atom, useStore } from 'nanostores';

const count = atom(0);

function Counter() {
  const $count = useStore(count);
  return (
    
    
      
    Count: {$count}
    
      
    
    
  );
}

    反冲：Facebook 对现代国家管理的看法

    Recoil 很有趣，因为它来自 Facebook 的 React 团队。他们重新审视了状态管理，并提出了一些在 React 生态系统中感觉很自然的东西。它引入了原子和选择器等概念，这些概念可能听起来很花哨，但一旦你开始使用它们，就会发现它们很有意义。

    Recoil 的突出特点是：

  • 学习曲线出奇地平缓
  • 更新非常智能 - 组件仅在其特定状态发生变化时重新渲染
  • 选择器概念对于派生状态非常有用
  • 它是专门为 React 构建的，所以一切都恰到好处
  • 它与 React 的并发功能配合得很好

    • 下面让我们来感受一下 Recoil 的简洁性：

    import { atom, useRecoilState } from 'recoil';

const countState = atom({
  key: 'countState',
  default: 0,
});

function Counter() {
  const [count, setCount] = useRecoilState(countState);
  return (
    
    
      
    Count: {count}
    
      
    
    
  );
}

    底线

    瞧，Redux 不会消失，它仍然是许多项目的可靠选择。但这些替代方案解决了我们许多人在使用 Redux 时遇到的实际问题。如果你正在开始一个新项目，我会认真考虑尝试其中一种。Zustand 是我现在大多数项目的首选 - 它达到了简单和强大的最佳平衡点。如果包大小让你夜不能寐，Nanostores 可能是你的新朋友。如果你全力投入 React 并想要一些感觉像是专门为你的需求而构建的东西，Recoil 可能正是你在寻找的东西。

    最好的部分是什么？它们都比 Redux 更容易向你的队友解释。这难道不值得单独考虑吗？