https://github.com/arqex/lorese
A very lightweight state management framework for frontend applications
https://github.com/arqex/lorese
Last synced: 2 months ago
JSON representation
A very lightweight state management framework for frontend applications
- Host: GitHub
- URL: https://github.com/arqex/lorese
- Owner: arqex
- Created: 2021-12-25T11:17:14.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-12-25T11:26:06.000Z (over 3 years ago)
- Last Synced: 2025-01-29T20:19:12.294Z (4 months ago)
- Language: TypeScript
- Size: 13.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Lorese
Lorese is a really lightweight state manager for frontend applications. It uses a single store for caching the data, and it should considered the source of truth for your app.
It is compound by 3 main parts:
* LO - loaders: Allow to fetch data asynchronously, and returns an object that can be consumed directly in a declarative way.
* RE - reducers: Set the data in the store, updating the cache and emiting events to allow you refresh your UI.
* SE - selectors: Create selectors to access the data in the store. Best practice is not to allow your UI get the store directly, instead create selectors with logic reusable across your app.
## How to use it
```js
import Lorese from 'lorese';
// We will have a store with 2 attributes
const store = {
todoIds: null, // This will be a list with our todo's ids
todos: {} // A map with the todos indexed by id
}
// Create our state manager
const stateManager = Lorese(store);
// We can access to the 3 elements from our stateManager
const {loader, selector, reducer} = stateManager;
// Selectors will give sense to our store
const getTodos = selector( store => {
// If our todos aren't loaded just return
if( !store.todoIds ) return;
// Return our todo's
return store.todoIds.map( id => store.todos[id] );
})
// Use a reducer to update our store
const onTodosLoaded = reducer( (store, todoList) => {
let todoIds = [];
let todos = {...store.todos};
todoList.forEach( todo => {
ids.push(todo.id);
todos[todo.id] = todo;
})
// Return the store updated
return { todoIds, todos };
});
// Create a loader to fetch our todos
const loadTodos = stateManager.loader({
selector: getTodos, // if the selector returns undefined, the load() method
async load(){
let todoList = await api.fetchTodos();
// Using the reducer here will update the store and refresh the UI
onTodosLoaded( todoList );
}
})
// ...
// Within your UI you can use the loader declaratively
const {isLoading, data: todos} = loadTodos();
isLoading ? renderLoading() : renderTodos(todos);
```
## Subscribe to changes in the store
```js
// Once the stateManager is created...
const stateManager = Lorese(store);
// We should have a method to refresh our UI
function rerender(){ /* Refresh our UI */ }
// We can listen to changes in the store
stateManager.addChangeListener( rerender );
// We can stop listening to the changes
stateManager.removeChangeListener( rerender );
```