reactive-properties
A lightweight alternative for RX and Redux, that utilises react hooks and dramatically reduces the amount of boiler plate code for the typical React application.
Installation
npm install --save reactive-properties
yarn add reactive-properties
Documetation
Property
Property is just a variable that can be observed.
To get the current value use the get
method. To subscribe to future updates, use the subscribe
method. Subscribe returns a function which can be called to unsubscribe from updates.
Piping
For developer convenience all properties have a pipe
method. It can be used to apply operators to a property.
property.pipe withEffect, mapx * 2,
State
Simplest property implementation. You provide the default value and can call the set
method to update the value.
console.logstate.get // prints 5 state.set42 console.logstate.get // prints 42 state.subscribeconsole.log'Update:', state.get state.set99 // "Update: 99" is printed to the console
Sends update notifications to all subscribers when the new value is set.
combine
Used to combine multiple properties into one.
b.set5 // sum is now 7 a.set6 // sum is now 11
Updates every time when one of the source properties update.
map
operator
Works similarly to Array.map
. Creates a new property which will always have values that are obtained by mapping the original property's values with the provided function.
withEffect
operator
Provides a way to add custom imperative logic when something starts observing the property.
property.pipe withEffect
Works similarly to React
's useEffect
. Can be usefull to start and stop background tasks when user visits a specific page, for example.
forEach
operator
Calls provided callback for each value that a property has. Including the current one.
waitFor
operator
Converts the property to a promise that resolves when the provided predicate returns true. Promise resolves with the first value that matched the predicate.
dedupBy
operator
Stops updates when property values don't change. Example:
state.forEachconsole.log // prints 0 state.set0 // nothing printed state.set1 // prints 1 state.set1 // nothing printed