Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/herber/nation
🌍💻 A minimalist, functional state management library.
https://github.com/herber/nation
functional functional-programming minimalist state state-machine
Last synced: 29 days ago
JSON representation
🌍💻 A minimalist, functional state management library.
- Host: GitHub
- URL: https://github.com/herber/nation
- Owner: herber
- License: mit
- Created: 2018-03-26T12:12:30.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-03-30T19:33:14.000Z (over 6 years ago)
- Last Synced: 2024-10-06T11:52:33.017Z (about 1 month ago)
- Topics: functional, functional-programming, minimalist, state, state-machine
- Language: JavaScript
- Size: 56.6 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
Nation
🌍💻 A minimalist, functional state management library.
## Features
- __Functional__: Nation enforces functional programming.
- __Minimal__: Nation is a fully functional state management lib weighing less than 500 byte.
- __Easy__: Nation's API is as minimal as possible.
- __Immutable__: State can only be set in actions or using `setState`.
- __Reactive__: The update event is emitted on every state change.
## Philosophy
State management libraries often weigh multiple kilobytes, even though most of the time you just need a small part of their API. __Nation's__ approach is different - nation only includes the bare minimum state management functionality.
Nation enforces functional programming, this allows nation to be even tinier and makes you code more explicit.
## Install
```
$ npm install nation
```
## Usage
```js
const nation = require('nation');
const ship = nation({
initial: () => ({
swimming: true
})
});
console.log(ship.state().swimming);
// => true
```
#### Actions
```js
ship.action(state => ({
setSwimming: (val) => {
state().swimming = val;
},
setName: (val) => {
state().name = val;
}
}));
ship.actions().setName('merry');
ship.actions().setSwimming(false);
console.log(ship.state().name);
// => 'merry'
console.log(ship.state().swimming);
// => false
```
#### State can also be set using `setState`
```js
ship.setState({
name: 'enterprise',
swimming: true
})
console.log(ship.state().name);
// => 'enterprise'
console.log(ship.state().swimming);
// => true
```
#### Computed properties
Computed properties can be accessed like normal state values. They are computed every time the state changes.
```js
ship.computed(state => ({
swimmingName: () => {
return `The ${state().swimming} is ${state().name == true ? 'swimming' : 'not swimming'}.`;
}
}));
console.log(ship.state().swimmingName);
// => 'The enterprise is swimming.'
```
#### Lifecycle
Nations lifecycle consists of a single method: `onChange`.
```js
ship.onChange((state) => {
console.log('The state has changed - State: ', state);
});
```
#### Async actions
Nation treats every function the same no matter if it's sync or async. The only difference is, that in async functions you have to use `setState` to set state.
```js
ship.action(state => ({
setAsync: async () => {
ship.setState({ asyncValue: await asyncFn() })
}
}));
ship.actions().setAsync();
// Wait
console.log(ship.state().asyncValue);
```
#### Nested state
Nation state can be nested, the `onChange` event will be passed on, so even nested state is reactive.
Nested state cannot be set using actions, you have to use `setState`.
```js
const cargo = nation({
initial: () => {
loaded: true
}
});
ship.setState({
cargo
});
ship.onChange((state) => {
console.log('Loaded state: '+ state.loaded);
})
cargo.setState({
loaded: false
});
// => Loaded state: false
```
## License
MIT © [Tobias Herber](http://tobihrbr.com)