@violetflux/kerros 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -11
- package/README.zh-CN.md +19 -11
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
<a href="https://github.com/violetflux/kerros/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@violetflux/kerros" alt="MIT license" /></a>
|
|
22
22
|
</p>
|
|
23
23
|
|
|
24
|
-
Kerros is a lightweight
|
|
24
|
+
Kerros is a lightweight way to share state between React components.
|
|
25
25
|
|
|
26
|
-
Write
|
|
26
|
+
Write a Store the same way you write a custom Hook. When local state needs to be shared, pass it to `createStore`, mount its Provider, and let each component select what it needs.
|
|
27
27
|
|
|
28
28
|
## Install
|
|
29
29
|
|
|
@@ -36,6 +36,23 @@ Write state as an ordinary custom Hook, wrap it with `createStore`, and share it
|
|
|
36
36
|
|
|
37
37
|
React 17, React 18, and React 19 are supported.
|
|
38
38
|
|
|
39
|
+
## Why Kerros?
|
|
40
|
+
|
|
41
|
+
- **Almost nothing new to learn** — reuse the React knowledge you already have; if you can write a custom Hook, you can write a Store
|
|
42
|
+
- **Designed for flexible refactoring** — Stores and components use the same Hook API, so local state can become shared state with very little work
|
|
43
|
+
- **Local and application-wide state** — Provider placement determines the Store scope, balancing flexibility with simplicity
|
|
44
|
+
- **Performance and TypeScript support** — focused selector subscriptions avoid unrelated rerenders and Store types are inferred automatically
|
|
45
|
+
|
|
46
|
+
## From state management to state sharing
|
|
47
|
+
|
|
48
|
+
Libraries such as Redux, Zustand, and Recoil can all share data, but their central job is still to organize state, update it, and define how data flows. “State management” is the right name for them.
|
|
49
|
+
|
|
50
|
+
Kerros focuses on a smaller and more direct problem. It does not invent a new data model or prescribe how async logic should work. It answers one question: **how can a piece of Hook state be shared between React components?**
|
|
51
|
+
|
|
52
|
+
Passing `value` and `onChange` through layer after layer damages component boundaries. Moving everything into one global Store does not automatically make an application scalable or maintainable either.
|
|
53
|
+
|
|
54
|
+
Kerros stays simple, lightweight, and reliable. Write local state as an ordinary Hook, share it only when necessary, use a Provider to set its scope, and use selectors to choose what each component observes.
|
|
55
|
+
|
|
39
56
|
## Quick start
|
|
40
57
|
|
|
41
58
|
### Create a Store
|
|
@@ -111,15 +128,6 @@ function TaskList() {
|
|
|
111
128
|
|
|
112
129
|
Kerros shallowly compares the selector object's top-level fields. When those selected fields stay equal, other Store updates do not rerender `TaskList`. The selector can stay inline and does not need `useCallback`.
|
|
113
130
|
|
|
114
|
-
## Why Kerros?
|
|
115
|
-
|
|
116
|
-
- **Just Hooks** — there are no reducers, actions, proxies, or new state syntax to learn
|
|
117
|
-
- **Focused rerenders** — a component updates only when the fields returned by its selector change
|
|
118
|
-
- **Provider scope** — mount a Store at the application root, inside a route, or around one widget
|
|
119
|
-
- **Multiple instances** — every mounted Provider creates an isolated Store instance
|
|
120
|
-
- **Store composition** — an inner Store can use an outer Store like any other Hook
|
|
121
|
-
- **React 17–19** — one package works across all three React generations
|
|
122
|
-
|
|
123
131
|
## Multiple instances
|
|
124
132
|
|
|
125
133
|
Each `TaskProvider` owns independent state:
|
package/README.zh-CN.md
CHANGED
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
<a href="https://github.com/violetflux/kerros/blob/main/README.es.md">Español</a>
|
|
15
15
|
</p>
|
|
16
16
|
|
|
17
|
-
Kerros
|
|
17
|
+
Kerros 是一个在 React 组件间共享状态的轻量方案。
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
你怎么写 custom Hook,就可以怎么写 Store。只有当局部状态需要被多个组件使用时,再交给 `createStore`,用 Provider 决定共享范围,用 selector 选择组件真正需要的数据。
|
|
20
20
|
|
|
21
21
|
## 安装
|
|
22
22
|
|
|
@@ -29,6 +29,23 @@ Kerros 是一个基于 React Hook 和 selector 的轻量状态共享库。
|
|
|
29
29
|
|
|
30
30
|
支持 React 17、React 18 和 React 19。
|
|
31
31
|
|
|
32
|
+
## 为什么要用 Kerros?
|
|
33
|
+
|
|
34
|
+
- **几乎没有学习成本**:直接复用已有的 React 知识,你怎么写 custom Hook,就可以怎么写 Store
|
|
35
|
+
- **为灵活重构而设计**:Store 和组件使用同一套 Hook API,可以近乎零成本地把组件局部状态转换成组件间共享状态
|
|
36
|
+
- **同时支持局部状态和全局状态**:Provider 决定 Store 的作用域,在灵活和简单之间取得平衡
|
|
37
|
+
- **优秀的性能和 TypeScript 支持**:selector 精确订阅,选择结果不变的组件不会重渲染,Store 类型可以自动推断
|
|
38
|
+
|
|
39
|
+
## 从状态管理到状态共享
|
|
40
|
+
|
|
41
|
+
Redux、Zustand、Recoil 这些状态管理库当然也能解决数据共享问题,但它们最核心的能力仍然是组织数据、操作数据和约束数据流,因此它们应该被称为“状态管理”工具。
|
|
42
|
+
|
|
43
|
+
Kerros 想解决的问题更小,也更直接。它不发明新的数据结构,不规定异步和数据流应该怎么写,只聚焦一个痛点:**如何在多个 React 组件间共享一段 Hook 状态。**
|
|
44
|
+
|
|
45
|
+
层层传递 `value`、`onChange` 会逐渐破坏组件边界;粗暴地把数据全部塞进一个全局 Store,也不会自动让应用获得更好的扩展性和可维护性。
|
|
46
|
+
|
|
47
|
+
Kerros 简单、轻量、可靠。先把状态写成普通 Hook,需要共享时再交给 `createStore`;Provider 决定状态共享到哪里,selector 决定每个组件订阅什么。
|
|
48
|
+
|
|
32
49
|
## 快速上手
|
|
33
50
|
|
|
34
51
|
### 创建 Store
|
|
@@ -104,15 +121,6 @@ function TaskList() {
|
|
|
104
121
|
|
|
105
122
|
Kerros 会浅比较 selector 返回对象的顶层字段。只要这些选中字段保持不变,Store 的其他更新就不会让 `TaskList` 重渲染。selector 可以直接写在调用位置,不需要 `useCallback`。
|
|
106
123
|
|
|
107
|
-
## 为什么用 Kerros
|
|
108
|
-
|
|
109
|
-
- **就是 Hook**:不需要学习 reducer、action、proxy 或新的状态语法
|
|
110
|
-
- **精确重渲染**:只有 selector 返回的字段变化时组件才更新
|
|
111
|
-
- **Provider 作用域**:Store 可以放在应用根部、路由内部或一个组件外层
|
|
112
|
-
- **多个实例**:每个 Provider 都会创建独立的 Store
|
|
113
|
-
- **Store 组合**:内层 Store 可以像普通 Hook 一样读取外层 Store
|
|
114
|
-
- **React 17–19**:同一个包兼容三个 React 大版本
|
|
115
|
-
|
|
116
124
|
## 多个实例
|
|
117
125
|
|
|
118
126
|
每个 `TaskProvider` 都拥有独立状态:
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@violetflux/kerros",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.1.2",
|
|
4
|
+
"description": "Hook-native state sharing for React with focused selector subscriptions.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
7
7
|
"react-hooks",
|