认识 Synapse：无需繁琐的状态管理

Source: Dev.to

Introduction

超简洁的 React 状态管理。没有 dispatch，没有 reducers，只有 signals。如果你曾觉得状态管理的工作量超出了实际需求，Synapse 值得一试。

Features

• Nuclei – 使用 createNucleus 创建的状态容器。一次性定义初始状态和更新逻辑。
• Signals – 轻量级的响应式原语，适用于更简单的场景。
• Hooks – useNucleus、usePick、useSignal 等，用于在组件中读取和更新状态。
• Set‑based updates – 调用 set 来更新状态。没有 actions、reducers，也没有 dispatch。

Usage Example

import { createNucleus, useNucleus } from '@forgedevstack/synapse';

const counterNucleus = createNucleus((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
  decrement: () => set((s) => ({ count: s.count - 1 })),
}));

function Counter() {
  const { count, increment } = useNucleus(counterNucleus);
  return { count };
}

就是这么简单——没有额外的模板代码。

Benefits

Less ceremony

传统的基于 store 的库通常需要 actions、reducers、selectors 和 middleware。Synapse 直接跳过这些步骤。你只需在一个地方定义状态及其变化方式，然后在组件中直接使用。

Built for how we actually write React

在可能的情况下同步更新，需要异步时也能支持。usePick 只订阅你关心的字段，提供细粒度的更新而无需额外工作。

Small and fast

压缩后 2 KB 以下。概念更少，运行时开销更低。

Comparison with Traditional Store Pattern

Mental Model

Synapse 采用单一的思维模型：

• State lives in nuclei or signals
• Update with set
• Subscribe with hooks

抽象更少，文件更少，数据流更清晰。

TypeScript

从第一天起就提供类型和推断。

DevTools

检查状态、时间旅行、导入/导出调试——全部集成。

Middleware

• Logger
• Persist
• Immer‑style updates

Data Fetching

useQuery 与 useMutation 用于 API 集成。

Signals & Computed Values

• Signals – 不需要完整 nucleus 的响应式值。
• Computed values – 从其他状态派生的状态。

Installation

npm i @forgedevstack/synapse

Quick Example

import { createNucleus, useNucleus } from '@forgedevstack/synapse';

const counterNucleus = createNucleus((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
}));

function App() {
  const { count, increment } = useNucleus(counterNucleus);
  return { count };
}

Conclusion

Synapse 是一个轻量、低仪式感的 React 状态库。它保持 API 简洁、体积小巧、思维模型易懂。如果你厌倦了繁重的状态管理模板，值得一试。

🔗 npm · Documentation