activejs / activejs

Pragmatic, Reactive State Management for JavaScript Apps

Pragmatic, Reactive State Management for JavaScript Apps

npm i @activejs/core

🚀 Get Started

📖 Documentation

🤾 Playground

📑 TodoMVC Example

⚡ Quick Example

This is how an implementation of a simple counter looks like, using a NumUnit, one of the reactive data structures that ActiveJS provides. The NumUnit stores and provides a number value at all times ensuring the type-safety.

// initialize a reactive data structure to store numbers
const counter = new NumUnit(); // with default initial-value 0

// two pure functions to produce an appropriate new value
const increment = value => value + 1;
const decrement = value => value - 1;

// subscribe for reactive value access, and log the value
counter.subscribe(value => console.log(value));
// immediately logs 0, and will log any future values

// increment
counter.dispatch(increment); // you'll see 1 in the console
// the pure function is called with the current value and
// the returned value is dispatched automatically

// decrement
counter.dispatch(decrement); // you'll see 0 in the console
// that's it our counter is complete

// you can also access the value directly
console.log(counter.value()); // logs 0

📊 Quick Comparisons

A simple "counter" implemented in Redux vs ActiveJS.



A simple "counter" implemented in NgRx vs ActiveJS.

🤝 Contributing

We welcome all contributions, whether you're reporting an issue, helping us fix bugs, improve the docs, or spread the word. We also welcome your suggestions and feedback.

⚖ Licence

MIT

💻 Author

Ankit Singh

activejs's Issues

DictUnit not persisting to local storage and subscribing after dispatching not working

Describe the bug
I have the following angular service

<dx-form [colCount]="2">
		<dxi-item>
			<div *dxTemplate>
				<pim-select
					(selection)="genderSelection($event)"
					[dataSource]="genderUrl"
					[grouped]="false"
					[placeholder]="'Gender *'"
				></pim-select>
			</div>
		</dxi-item>
</dx-form>


import { Injectable } from '@angular/core'
import { DictUnit } from '@activejs/core'

@Injectable({
	providedIn: 'root',
})
export class RegistrationState {
	private _dictionaryUnit = new DictUnit({
		id: 'registration',
		// immutable: true,
		persistent: true,
		cacheSize: 200,
		// initialValue: {},
		distinctDispatchCheck: true,
	})

	get dictUnit() {
		return this._dictionaryUnit
	}
}

class Stats {
	constructor(
		private _regState: RegistrationState,
	) {}

        ngOnInit(): void { }

	genderSelection(e: Record<string, string>) {
               console.log{e} // e IS CORRECTLY PRINTED
		this._regState.dictUnit.dispatch('gender', e)  // NO LOCAL STORAGE
	}
}


export class InfoComponent implements OnInit {
    constructor(private _regState: RegistrationState) {}

	ngOnInit(): void {
	   this._regState.dictUnit.subscribe((gender) => {
			console.log('gender: ', { gender })  // NOTHING IS LOGGED
		})
	}

}

To Reproduce
Steps to reproduce the behavior:

Expected behavior
The dispatched data should be persisted to local storage and printed in the subscription

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS: [Linux Mint]
• Browser [Chrome]
• ActiveJS Version ["@activejs/core": "^0.2.3",]

Additional context
Add any other context about the problem here.
"@angular/cli": "^12.0.2",
"rxjs": "~6.6.7"

a simple react example would be so nice

a simple react example would be so nice

Abandoned repo?

Has development stopped in this repo? I would like to use it but it seems to have been abandoned?

React suspense support on AsyncSystem

Describe the solution you'd like
AsyncSystem optional suspense support, something like
new AsyncSystem<string, string, any>({ reactSuspense: true });

https://reactjs.org/docs/concurrent-mode-suspense.html#for-library-authors

Performance Comparison?

How would this compare to other state management libraries?
https://stefankrause.net/js-frameworks-benchmark8/table.html

Currently I am using React Easy State (https://github.com/RisingStack/react-easy-state), and this library seems similar. (Amazing work though!)

activejs/core NOT compatible with rxjs 7.1.0

Describe the bug
A clear and concise description of what the bug is.
I am using activejs/core in my application. I update to rxjs 7.1.0. After, everywhere I use .subscribe errors are generated

To Reproduce
Steps to reproduce the behavior:

1. Create a DictUnit (using rxjs 6.*)
2. add a key/value property
3. Subscribe and prine the value of the property
4. Update to rxjs 7.1.0
5. Attempt to serve the app - the errors are generated in the console.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS: [e.g. iOS]
• Browser chrome
• ActiveJS Version [e.g. 0.2.3]

Additional context
Add any other context about the problem here.

Docs Calrity

In the cases where the Docs reference the value of a unit they seem a little misleading

StringUnit can not be used as a drop-in replacement for primitive string value, since StringUnit is a non-primitive data structure, and the actual string value is stored inside as Unit.value property. See the below comparisons for more clarity.

unit.value does not seem to be a getter, which would have it behave as a property -- rather it's a function that returns the value, which makes it a method.

perhaps?

StringUnit can not be used as a drop-in replacement for primitive string value, since StringUnit is a non-primitive data structure. The contained string value within the StringUnit is accessed via the Unit.value() method. See the below comparisons for more clarity.

Custom Persistence (per Unit persistence) - Idea/Proposal/Question?

So I just wanted to ask if Activejs could/would support:

1. Custom Persistent Storage
   Something along the lines of providing an interface (get, set, observe...) which then a developer can provide and handle things like serialization, maybe even initial values etc. themselves. More specifically for example an IndexedDB wrapper might be interesting - here serialization for example would not have to (and should not) be done.

2. Storage Specification per Unit Type
   Following the first point, it would be nice to specify this storage interface per unit (not sure if that's already/or even possible - since it needs to be set during configuration of Activejs I assume it isn't). This way one could for example save an "image blob list" unit in the more performant (and serialization-free) IndexedDB and some other smaller units (for example list of updogs) in eg. a synchronizable (and serialized) extension storage (browser.storage.sync this is specific to browser extensions).

Both of these could be done by not using Activejs' persistence, and instead listening on the object changes and saving them ourselves.

Would this observer approach instead be the recommended way to go?
Or would/should the above 2 ideas (or one of them) be in the scope of Activejs?

What do you think?

Generally asking anyone (inside and outside the Activejs team) who's interested

Vue Integration

Hi,

first of all, I would like to say that activejs looks very promising. And the amount of work to produce such a library and the related documentation is impressive! Thank you for that!

I have to admit that I have limited time to investigate new libraries in my current job and we tend to use vuejs.

It would be great to have in the documentation an integration with vuejs to help to start using it.

Good job and keep going! 👍