https://github.com/jnorth/megalith
The small and straightforward JavaScript state container.
https://github.com/jnorth/megalith
flux react state-container
Last synced: 4 months ago
JSON representation
The small and straightforward JavaScript state container.
- Host: GitHub
- URL: https://github.com/jnorth/megalith
- Owner: jnorth
- License: mit
- Created: 2016-01-26T07:36:19.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-07-17T07:21:02.000Z (almost 9 years ago)
- Last Synced: 2025-10-04T19:23:47.765Z (8 months ago)
- Topics: flux, react, state-container
- Language: JavaScript
- Homepage:
- Size: 55.7 KB
- Stars: 15
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Megalith
The small and straightforward JavaScript state container.
Megalith allows you to arrange your application state into a nested tree of
`Store` objects, each encapsulating related state and actions. It can be
considered an implementation of ideas from Redux and mobx-state-tree, with a
lightweight class-based API.
## Overview
Megalith has the same three core concepts as many other state containers:
> 1. Application state is stored in a single object tree.
> 2. You mark your intent to change state by dispatching actions. Actions are
> simple objects with a `type` and optionally some parameters.
> 3. Given an action and the previous state, a new state tree is generated using
> a simple function.
The implementation differs however, with actions being created automatically
from `action` methods and state being organized into a tree of `Store` classes.
This allows you to retain most benefits from a more functional approach, while
reducing boilerplate and keeping related code together.
## Example
```js
import { Store, action, snapshot } from 'megalith';
class App extends Store {
// Set our store's initial state. This defines its 'shape' and default values.
initialState = {
counter: 0,
messages: new MessagesStore(), // Stores can be nested.
};
// Action methods are the only way to change store state. They can be called
// like regular methods, and are expected to return a modified copy of the
// entire state object.
@action increment(n=1) {
return { ...this.state, counter: this.counter + n };
}
}
class MessagesStore extends Store {
// Store state is typically an object, but can be an array, string, number,
// or any other type of data.
initialState = [];
@action add(message) {
return [...this.state, message];
}
}
const app = new App();
// State properties can be accessed like regular (read-only) properties.
app.counter; // => 0
// Action methods are called like regular methods.
app.increment(5);
app.messages.add('hello world!');
// Action methods trigger events
app.events.all(event => {
event.action; // => { type: 'messages.add', payload: ['hello world!'] }
// Snapshots of the entire state tree can be taken at any point.
snapshot.create(event.store); // => { counter: 5, messages: ['hello world!'] }
});
```
## Documentation
- [Quick Start](/docs/quick-start)
- [Introduction](/docs/quick-start/1-introduction.md)
- [State](/docs/quick-start/2-state.md)
- [Actions](/docs/quick-start/3-actions.md)
- [Events](/docs/quick-start/4-events.md)
- [API Reference](/docs/api)
- [Store](/docs/api/Store.md)
- [action](/docs/api/action.md)
- [events](/docs/api/events.md)
- [snapshot](/docs/api/snapshot.md)
- [Examples](/docs/examples)
- [Async Actions](/docs/examples/async-actions.md)
- [ES5 Syntax](/docs/examples/es5.md)
## License
Copyright (c) 2016 Joseph North
Megalith is licensed under the [MIT License](LICENSE.md).