reca 2.3.7 → 2.4.0
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 +154 -18
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,15 +1,39 @@
|
|
|
1
1
|
# ReCA - React Clean Architecture state manager
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/reca)
|
|
4
4
|
[](https://github.com/LabEG/reca/blob/main/LICENSE)
|
|
5
|
-
|
|
6
6
|
[](https://www.codacy.com/gh/LabEG/reca/dashboard?utm_source=github.com&utm_medium=referral&utm_content=LabEG/reca&utm_campaign=Badge_Grade)
|
|
7
|
-
|
|
8
|
+
[](https://github.com/LabEG/reca/security/code-scanning)
|
|
9
9
|
[](CODE_OF_CONDUCT.md)
|
|
10
10
|
|
|
11
11
|
Created at the intersection of Functional style and OOP technologies. It is based on the simplicity of the functional style of the view, enriched with OOP technologies for writing business logic. Perfect for beginner developers and complex enterprise applications
|
|
12
12
|
|
|
13
|
+
## Table of Contents
|
|
14
|
+
|
|
15
|
+
- [ReCA - React Clean Architecture state manager](#reca---react-clean-architecture-state-manager)
|
|
16
|
+
- [Table of Contents](#table-of-contents)
|
|
17
|
+
- [Features](#features)
|
|
18
|
+
- [Why not Redux or Flux?](#why-not-redux-or-flux)
|
|
19
|
+
- [Comparison with Other Libraries](#comparison-with-other-libraries)
|
|
20
|
+
- [Why Choose ReCA?](#why-choose-reca)
|
|
21
|
+
- [Installation](#installation)
|
|
22
|
+
- [Using npm](#using-npm)
|
|
23
|
+
- [Using yarn](#using-yarn)
|
|
24
|
+
- [Using pnpm](#using-pnpm)
|
|
25
|
+
- [Setup](#setup)
|
|
26
|
+
- [Examples](#examples)
|
|
27
|
+
- [Quick Start - Counter Example](#quick-start---counter-example)
|
|
28
|
+
- [ToDo Example](#todo-example)
|
|
29
|
+
- [Example low-level Store](#example-low-level-store)
|
|
30
|
+
- [Advanced Example - Dependency Injection for Enterprise Applications](#advanced-example---dependency-injection-for-enterprise-applications)
|
|
31
|
+
- [Documentation and Resources](#documentation-and-resources)
|
|
32
|
+
- [Documentation](#documentation)
|
|
33
|
+
- [Community and Support](#community-and-support)
|
|
34
|
+
- [Contributing](#contributing)
|
|
35
|
+
- [License](#license)
|
|
36
|
+
|
|
13
37
|
## Features
|
|
14
38
|
|
|
15
39
|
- **Microstores** - calculations state of components don't affect to other components, small CPU usage for update states,
|
|
@@ -27,23 +51,106 @@ Created at the intersection of Functional style and OOP technologies. It is base
|
|
|
27
51
|
- **Reducers** - a large number of reducers makes you spend a lot of time searching for the necessary function.
|
|
28
52
|
- **Architecture problem** - forces you to use tons of additional packages to solve problems, such as saga, thunk, toolkit and many others.
|
|
29
53
|
|
|
30
|
-
##
|
|
54
|
+
## Comparison with Other Libraries
|
|
55
|
+
|
|
56
|
+
| Feature | ReCA | Redux | MobX | Zustand |
|
|
57
|
+
|---------|------|-------|------|----------|
|
|
58
|
+
| **Bundle Size** | ~1KB | ~8KB | ~16KB | ~1KB |
|
|
59
|
+
| **Boilerplate** | Minimal | Heavy | Medium | Minimal |
|
|
60
|
+
| **Learning Curve** | Easy | Steep | Medium | Easy |
|
|
61
|
+
| **TypeScript** | Built-in | Good | Good | Good |
|
|
62
|
+
| **Performance** | Excellent | Good | Excellent | Excellent |
|
|
63
|
+
| **Dependency Injection** | ✅ Built-in | ❌ Manual | ❌ Manual | ❌ Manual |
|
|
64
|
+
| **Clean Architecture** | ✅ Native | ⚠️ Requires setup | ⚠️ Requires setup | ❌ Limited |
|
|
65
|
+
| **Microstores** | ✅ Yes | ❌ Monostore | ✅ Yes | ✅ Yes |
|
|
66
|
+
| **SSR Support** | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes |
|
|
67
|
+
| **Middleware** | Via DI | ✅ Yes | ❌ Limited | ✅ Yes |
|
|
68
|
+
| **Async Actions** | ✅ Native | ⚠️ Requires thunk/saga | ✅ Native | ✅ Native |
|
|
69
|
+
|
|
70
|
+
### Why Choose ReCA?
|
|
71
|
+
|
|
72
|
+
- **Smallest footprint** - Only 1KB minified, same as Zustand but with more features
|
|
73
|
+
- **Zero boilerplate** - No actions, reducers, or dispatchers needed
|
|
74
|
+
- **Enterprise-ready** - Built-in DI and Clean Architecture support
|
|
75
|
+
- **Developer-friendly** - Simple API, easy to learn and use
|
|
76
|
+
- **Flexible** - Choose between AutoStore (automatic) or Store (manual control)
|
|
77
|
+
- **Type-safe** - Full TypeScript support out of the box
|
|
78
|
+
|
|
79
|
+
## Installation
|
|
80
|
+
|
|
81
|
+
### Using npm
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
npm install reca reflect-metadata
|
|
85
|
+
```
|
|
31
86
|
|
|
32
|
-
|
|
87
|
+
### Using yarn
|
|
33
88
|
|
|
34
|
-
```
|
|
35
|
-
|
|
89
|
+
```bash
|
|
90
|
+
yarn add reca reflect-metadata
|
|
36
91
|
```
|
|
37
92
|
|
|
38
|
-
|
|
93
|
+
### Using pnpm
|
|
39
94
|
|
|
40
|
-
```
|
|
41
|
-
|
|
95
|
+
```bash
|
|
96
|
+
pnpm add reca reflect-metadata
|
|
42
97
|
```
|
|
43
98
|
|
|
99
|
+
### Setup
|
|
100
|
+
|
|
101
|
+
After installation, import `reflect-metadata` at the entry point of your application (e.g., `index.tsx` or `main.tsx`):
|
|
102
|
+
|
|
103
|
+
```typescript
|
|
104
|
+
import "reflect-metadata";
|
|
105
|
+
import React from "react";
|
|
106
|
+
import ReactDOM from "react-dom/client";
|
|
107
|
+
import { App } from "./App";
|
|
108
|
+
|
|
109
|
+
ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
> **Note:** The `reflect-metadata` package is required for dependency injection functionality. Make sure to import it before any other imports in your application entry point.
|
|
113
|
+
|
|
44
114
|
## Examples
|
|
45
115
|
|
|
46
|
-
### Example
|
|
116
|
+
### Quick Start - Counter Example
|
|
117
|
+
|
|
118
|
+
A simple example to get you started with ReCA:
|
|
119
|
+
|
|
120
|
+
```typescript
|
|
121
|
+
// counter.store.ts
|
|
122
|
+
import { AutoStore } from "reca";
|
|
123
|
+
|
|
124
|
+
export class CounterStore extends AutoStore {
|
|
125
|
+
public count: number = 0;
|
|
126
|
+
|
|
127
|
+
public increment(): void {
|
|
128
|
+
this.count++;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
public decrement(): void {
|
|
132
|
+
this.count--;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
// Counter.tsx
|
|
137
|
+
import { useStore } from "reca";
|
|
138
|
+
import { CounterStore } from "./stores/counter.store";
|
|
139
|
+
|
|
140
|
+
export const Counter = () => {
|
|
141
|
+
const store = useStore(CounterStore);
|
|
142
|
+
|
|
143
|
+
return (
|
|
144
|
+
<div>
|
|
145
|
+
<h1>Count: {store.count}</h1>
|
|
146
|
+
<button onClick={store.increment}>+1</button>
|
|
147
|
+
<button onClick={store.decrement}>-1</button>
|
|
148
|
+
</div>
|
|
149
|
+
);
|
|
150
|
+
};
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### ToDo Example
|
|
47
154
|
|
|
48
155
|
Create your Store by inheriting from AutoStore, and use it in a component via useStore hook.
|
|
49
156
|
|
|
@@ -179,11 +286,25 @@ export const ToDoComponent = (): JSX.Element => {
|
|
|
179
286
|
};
|
|
180
287
|
```
|
|
181
288
|
|
|
182
|
-
### Example
|
|
289
|
+
### Advanced Example - Dependency Injection for Enterprise Applications
|
|
183
290
|
|
|
184
|
-
This example demonstrates
|
|
291
|
+
This example demonstrates how to build scalable enterprise applications using ReCA with Dependency Injection. It shows the simplicity of business logic organization following Clean Architecture principles.
|
|
185
292
|
|
|
186
|
-
|
|
293
|
+
The example includes:
|
|
294
|
+
|
|
295
|
+
- **Service Layer** - encapsulates business logic and external API calls
|
|
296
|
+
- **Model Layer** - defines data structures
|
|
297
|
+
- **Store Layer** - manages state and coordinates services
|
|
298
|
+
- **Component Layer** - pure view logic
|
|
299
|
+
|
|
300
|
+
This architecture makes your code:
|
|
301
|
+
|
|
302
|
+
- **Testable** - easily mock services for unit tests
|
|
303
|
+
- **Maintainable** - clear separation of concerns
|
|
304
|
+
- **Scalable** - add new features without modifying existing code
|
|
305
|
+
- **Flexible** - swap implementations through DI (e.g., Repository, Provider, Logger)
|
|
306
|
+
|
|
307
|
+
```typescript
|
|
187
308
|
// SpaceXCompanyInfo.ts
|
|
188
309
|
export class SpaceXCompanyInfo {
|
|
189
310
|
|
|
@@ -284,11 +405,26 @@ export const TestStoreComponent = (): JSX.Element => {
|
|
|
284
405
|
|
|
285
406
|
```
|
|
286
407
|
|
|
287
|
-
##
|
|
408
|
+
## Documentation and Resources
|
|
409
|
+
|
|
410
|
+
### Documentation
|
|
411
|
+
|
|
412
|
+
- **[Wiki](https://github.com/LabEG/reca/wiki)** - Comprehensive guides, tutorials, and API reference
|
|
413
|
+
- **[API Documentation](https://github.com/LabEG/reca/wiki)** - Detailed API documentation for all features
|
|
414
|
+
|
|
415
|
+
### Community and Support
|
|
416
|
+
|
|
417
|
+
- **[Discord Server](https://discordapp.com/channels/974049080454045796/974049142022209566)** - Join our community for real-time help and discussions
|
|
418
|
+
- **[GitHub Discussions](https://github.com/LabEG/reca/discussions)** - Ask questions and share ideas
|
|
419
|
+
- **[GitHub Issues](https://github.com/LabEG/reca/issues)** - Report bugs or request features
|
|
420
|
+
|
|
421
|
+
### Contributing
|
|
288
422
|
|
|
289
|
-
|
|
423
|
+
We welcome contributions! See our:
|
|
290
424
|
|
|
291
|
-
|
|
425
|
+
- **[Contributing Guide](CONTRIBUTING.md)** - Learn how to contribute to the project
|
|
426
|
+
- **[Code of Conduct](CODE_OF_CONDUCT.md)** - Our community guidelines
|
|
427
|
+
- **[Security Policy](SECURITY.md)** - How to report security vulnerabilities
|
|
292
428
|
|
|
293
429
|
## License
|
|
294
430
|
|