Laco
Very simple and powerful state management solution for React and Inferno.
Set up your stores and subscribe to them. Easy as that!
Check out the introductory blog post.
npm install laco
npm install laco-inferno
or npm install laco-react
Summary
- 🚀 Simple to use
- 🎉 Lightweight (under 1kb in size)
- ✨ Partial Redux DevTools Extension support (time travel)
Example
// Creating a new store with an initial state { count: 0 }const CounterStore = count: 0 // Implementing some actions to update the storeconst increment = CounterStoreconst decrement = CounterStore const Counter = <Subscribe to=CounterStore> <div> <button onClick=decrement>-</button> <span>statecount</span> <button onClick=increment>+</button> </div> </Subscribe>
For more examples check the examples folder.
Following commands are available for each example project:
npm run start:dev
npm run start:prod
npm run test
Redux DevTools Extension
Check out Redux DevTools Extension.
Time travel
Just click on the stopwatch icon and you will get a slider which you can play with. That's it! :)
React Native Debugger
Check out React Native Debugger.
Time travel
Works as you would expect :)!
API
Store(initialState: Object, name?: String)
// Initializing a new store with an initial state and a name:const NewStore =
The name is optional and is used to get an overview of action and store relationship in Redux DevTools Extension. Action names for the Store will now show up as Counter - ${actionType}
in DevTools Extension where as before only ${actionType}
was shown.
Store.get()
// Getting the state of the storeStore
Returns an object which could be something like { count: 0 }
following the example.
Store.set(state: Function, info?: String)
// Setting a new state and passing an optional action name "increment"Store
Store.replace(state: Function, info?: String)
Immutability is taking care of to a certain extent behind the scenes with the spread operator with Store.set()
but you might want more control over the state. You can do this by using Store.replace()
like so:
// Setting a new state and passing an optional action name "increment"Store
Store.setCondition(condition: Function)
// Setting a condition to prevent count from going below 0// and a special case for `SudoDecrement` action which CAN make count go below 0CounterStore
Setting a condition on a store will make every Store.set()
call go through the condition first.
Store.reset()
// Resets the store to initial stateStore
A good practice when testing is to call reset()
on a store before using the store in a test. This takes care of some edge cases that you might run into. The reason for this is that Laco is using a global object behind the scenes to store all of your stores states into one big object. Redux also operates on one global object which makes time travel possible.
Store.dispatch(value: any, info: String)
// Dispatching an action that does not change the state of the storeStore
You might want to dispatch an action that is associated with a certain store but don't want to change the state. The action will in this case be shown as StoreName - Location change
.
dispatch(value: any, info: String)
// Dispatching a global action that does not change any state
You might want to dispatch a global action that is NOT associated with any store. The action will in this case just be shown as Location change
.
<Subscribe />
Props
to
- Array of stores you want to subscribe to
<Subscribe to=CounterStore> <div> <button onClick=decrement>-</button> <span>count</span> <button onClick=increment>+</button> </div> </Subscribe>
The Subscribe
component is making use of the new render prop idea. Related articles:
Testing
Testing using tape:
Credits
Heavily inspired by: