Skip to content

Commit f693de8

Browse files
LabEGLabEG
committed
docs: enhance README with detailed table of contents and comparison with other libraries
1 parent 239bac7 commit f693de8

File tree

1 file changed

+122
-7
lines changed

1 file changed

+122
-7
lines changed

‎README.md‎

Lines changed: 122 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,30 @@
1010

1111
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
1212

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+
1337
## Features
1438

1539
- **Microstores** - calculations state of components don't affect to other components, small CPU usage for update states,
@@ -27,6 +51,31 @@ Created at the intersection of Functional style and OOP technologies. It is base
2751
- **Reducers** - a large number of reducers makes you spend a lot of time searching for the necessary function.
2852
- **Architecture problem** - forces you to use tons of additional packages to solve problems, such as saga, thunk, toolkit and many others.
2953

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+
3079
## Installation
3180

3281
### Using npm
@@ -64,7 +113,44 @@ ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
64113
65114
## Examples
66115

67-
### Example AutoStore
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
68154

69155
Create your Store by inheriting from AutoStore, and use it in a component via useStore hook.
70156

@@ -200,11 +286,25 @@ export const ToDoComponent = (): JSX.Element => {
200286
};
201287
```
202288

203-
### Example using DI
289+
### Advanced Example - Dependency Injection for Enterprise Applications
204290

205-
This example demonstrates the simplicity of the business logic and the simplified principles of code organization according to the Clean Architecture methodology. The example is simplified for readme, but following the same principles you can organize a full-fledged Clean Architecture. Through the service constructor, you can pass other DI dependencies, such as Repository, Provider, and others.
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.
206292

207-
``` typescript
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
208308
// SpaceXCompanyInfo.ts
209309
export class SpaceXCompanyInfo {
210310

@@ -305,11 +405,26 @@ export const TestStoreComponent = (): JSX.Element => {
305405

306406
```
307407

308-
## Support and Documentation
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
309422

310-
Discord server: [click here](https://discordapp.com/channels/974049080454045796/974049142022209566)
423+
We welcome contributions! See our:
311424

312-
Wiki: [click here](https://github.com/LabEG/reca/wiki)
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
313428

314429
## License
315430

0 commit comments

Comments
 (0)