@inglorious/store 6.1.1 → 6.1.3
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 +37 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
A Redux-compatible, ECS-inspired state library that makes state management as elegant as game logic.
|
|
7
7
|
|
|
8
|
-
**Drop-in replacement for Redux.** Works with `react-redux` and Redux DevTools.
|
|
8
|
+
**Drop-in replacement for Redux.** Works with `react-redux` and Redux DevTools. Borrows concepts from Entity-Component-System architectures and Functional Programming to provide an environment where you can write simple, predictable, and testable code.
|
|
9
9
|
|
|
10
10
|
```javascript
|
|
11
11
|
// from redux
|
|
@@ -20,7 +20,7 @@ import { createStore } from "@inglorious/store"
|
|
|
20
20
|
|
|
21
21
|
Redux is powerful but verbose. You need action creators, reducers, middleware for async operations, and a bunch of decisions about where logic should live. Redux Toolkit cuts the boilerplate, but you're still writing a lot of ceremony.
|
|
22
22
|
|
|
23
|
-
Inglorious Store
|
|
23
|
+
Inglorious Store eliminates the boilerplate entirely with an **entity-based architecture** inspired by game engines. Some of the patterns that power AAA games now power your state management.
|
|
24
24
|
|
|
25
25
|
Game engines solved state complexity years ago — Inglorious Store brings those lessons to web development.
|
|
26
26
|
|
|
@@ -187,7 +187,7 @@ const entities = {
|
|
|
187
187
|
|
|
188
188
|
Even though it looks like types expose methods, they are actually **event handlers**, very similar to Redux reducers. There are a few differences though:
|
|
189
189
|
|
|
190
|
-
1. Just like RTK reducers, you can mutate the entity directly since event handlers are using an immutability library under the hood. Not Immer, but Mutative
|
|
190
|
+
1. Just like RTK reducers, you can mutate the entity directly since event handlers are using an immutability library under the hood. Not Immer, but Mutative — which claims to be 10x faster than Immer.
|
|
191
191
|
|
|
192
192
|
```javascript
|
|
193
193
|
const types = {
|
|
@@ -218,7 +218,7 @@ const types = {
|
|
|
218
218
|
|
|
219
219
|
## Installation & Setup
|
|
220
220
|
|
|
221
|
-
The Inglorious store, just like Redux, can be used standalone.
|
|
221
|
+
The Inglorious store, just like Redux, can be used standalone. However, it's commonly used together with component libraries such as React.
|
|
222
222
|
|
|
223
223
|
### Basic Setup with `react-redux`
|
|
224
224
|
|
|
@@ -298,7 +298,8 @@ function Counter() {
|
|
|
298
298
|
return (
|
|
299
299
|
<div>
|
|
300
300
|
<p>{count}</p>
|
|
301
|
-
<button onClick={() => notify("increment")}>+</button> //
|
|
301
|
+
<button onClick={() => notify("increment")}>+</button> // simplified
|
|
302
|
+
syntax
|
|
302
303
|
<button onClick={() => notify("decrement")}>-</button>
|
|
303
304
|
</div>
|
|
304
305
|
)
|
|
@@ -386,7 +387,7 @@ const types = {
|
|
|
386
387
|
|
|
387
388
|
### 🔊 Event Broadcasting
|
|
388
389
|
|
|
389
|
-
Events are broadcast to all entities via pub/sub. Every entity handler receives every event of that type, just like in Redux.
|
|
390
|
+
Events are broadcast to all entities via pub/sub. Every entity handler receives every event of that type, just like it does in Redux.
|
|
390
391
|
|
|
391
392
|
```javascript
|
|
392
393
|
const types = {
|
|
@@ -437,7 +438,7 @@ store.notify("toggle", "todo1")
|
|
|
437
438
|
|
|
438
439
|
### ⚡ Async Operations
|
|
439
440
|
|
|
440
|
-
In **Redux/RTK**, logic should be written inside
|
|
441
|
+
In **Redux/RTK**, logic should be written inside pure functions as much as possible — specifically in reducers, not action creators. But what if I need to access some other part of the state that is not visible to the reducer? What if I need to combine async behavior with sync behavior? This is where the choice of "where does my logic live?" matters.
|
|
441
442
|
|
|
442
443
|
In **Inglorious Store:** your event handlers can be async, and you get deterministic behavior automatically. Inside an async handler, you can access other parts of state (read-only), and you can trigger other events via `api.notify()`. Even if we give up on some purity, everything still maintains predictability because of the underlying **event queue**:
|
|
443
444
|
|
|
@@ -763,11 +764,40 @@ Check out the following demos to see the Inglorious Store in action on real-case
|
|
|
763
764
|
- **[TodoMVC](https://github.com/IngloriousCoderz/inglorious-engine/tree/main/examples/apps/todomvc)** - An (ugly) clone of Kent Dodds' [TodoMVC](https://todomvc.com/) experiments, showing the full compatibility with react-redux and The Redux DevTools.
|
|
764
765
|
- **[TodoMVC-CS](https://github.com/IngloriousCoderz/inglorious-engine/tree/main/examples/apps/todomvc-cs)** - A client-server version of the TodoMVC, which showcases the use of `notify` as a cleaner alternative to `dispatch` and async event handlers.
|
|
765
766
|
- **[TodoMVC-RT](https://github.com/IngloriousCoderz/inglorious-engine/tree/main/examples/apps/todomvc-rt)** - A "multiplayer" version, in which multiple clients are able to synchronize through a real-time server.
|
|
767
|
+
- **[TodoMVC-TS](https://github.com/IngloriousCoderz/inglorious-engine/tree/main/examples/apps/todomvc-ts)** - A typesafe version of the base TodoMVC.
|
|
768
|
+
|
|
769
|
+
---
|
|
766
770
|
|
|
767
771
|
## Part of the Inglorious Engine
|
|
768
772
|
|
|
769
773
|
This store powers the [Inglorious Engine](https://github.com/IngloriousCoderz/inglorious-engine), a functional game engine. The same patterns that power games power your web apps.
|
|
770
774
|
|
|
775
|
+
## Frequently Unsolicited Complaints (FUCs)
|
|
776
|
+
|
|
777
|
+
It's hard to accept the new, especially on Reddit. Here are the main objections to the Inglorious Store.
|
|
778
|
+
|
|
779
|
+
**"This is not ECS."**
|
|
780
|
+
|
|
781
|
+
It's not. The Inglorious Store is _inspired_ by ECS, but doesn't strictly follow ECS. Heck, not even the major game engines out there follow ECS by the book!
|
|
782
|
+
|
|
783
|
+
Let's compare the two:
|
|
784
|
+
|
|
785
|
+
| ECS Architecture | Inglorious Store |
|
|
786
|
+
| ------------------------------------- | -------------------------------------- |
|
|
787
|
+
| Entities are ids | Entities have an id |
|
|
788
|
+
| Components are pure, consecutive data | Entities are pure bags of related data |
|
|
789
|
+
| Data and behavior are separated | Data and behavior are separated |
|
|
790
|
+
| Systems operate on the whole state | Systems operate on the whole state |
|
|
791
|
+
| Usually written in an OOP environment | Written in an FP environment |
|
|
792
|
+
|
|
793
|
+
**"This is not FP."**
|
|
794
|
+
|
|
795
|
+
It looks like it's not, and that's a feature. If you're used to classes and instances, the Inglorious Store will feel natural to you. Even behavior composition looks like inheritance, but it's actually function composition. The same [Three Principles](https://redux.js.org/understanding/thinking-in-redux/three-principles) that describe Redux are applied here (with some degree of freedom on function purity).
|
|
796
|
+
|
|
797
|
+
**"This is not Data-Oriented Design."**
|
|
798
|
+
|
|
799
|
+
It's not. Please grep this README and count how many occurrences of DoD you can find. This is not [Data-Oriented Design](https://en.wikipedia.org/wiki/Data-oriented_design), which is related to low-level CPU cache optimization. It's more similar to [Data-Driven Programming](https://en.wikipedia.org/wiki/Data-driven_programming), which is related to separating data and behavior. The Inglorious Engine separates behavior in... behaviors (grouped into so-called types), while the data is stored in plain objects called entities.
|
|
800
|
+
|
|
771
801
|
---
|
|
772
802
|
|
|
773
803
|
## License
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inglorious/store",
|
|
3
|
-
"version": "6.1.
|
|
3
|
+
"version": "6.1.3",
|
|
4
4
|
"description": "A state manager for real-time, collaborative apps, inspired by game development patterns and compatible with Redux.",
|
|
5
5
|
"author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
|
|
6
6
|
"license": "MIT",
|