Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/developit/state-machine-component
⚙️ State machine -powered components in 250 bytes
https://github.com/developit/state-machine-component
preact preact-components state-machine state-management
Last synced: about 1 month ago
JSON representation
⚙️ State machine -powered components in 250 bytes
- Host: GitHub
- URL: https://github.com/developit/state-machine-component
- Owner: developit
- Created: 2018-01-19T20:01:39.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-01-21T00:03:21.000Z (over 6 years ago)
- Last Synced: 2024-04-13T11:56:33.045Z (5 months ago)
- Topics: preact, preact-components, state-machine, state-management
- Language: JavaScript
- Homepage: https://npm.im/state-machine-component
- Size: 11.7 KB
- Stars: 174
- Watchers: 5
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
state-machine-component
A tiny (~250 byte) utility to create state machine components using two pure functions.
🔥 [**JSFiddle Demo**](https://jsfiddle.net/developit/x0td4bmy/)
### Install
This project uses [node](http://nodejs.org) and [npm](https://npmjs.com). Go check them out if you don't have them locally installed.
```sh
npm install --save state-machine-component
```
Then with a module bundler like [webpack](https://webpack.js.org) or [rollup](http://rollupjs.org), use as you would anything else:
```js
import stateMachine from 'state-machine-component';
```
The [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](https://unpkg.com):
```html
```
The library will install itself globally as `window.stateMachineComponent`.
### Usage
The API is a single function that accepts 2 pure functions as arguments:
```js
stateMachineComponent(reduce, render)
```
The first function, `reduce()`, takes in the current state and applies an `action` to it, similar to a reducer in Redux:
```js
// Reduce is a redux-style reducer
function reduce(state, action) {
// actions are like Redux Standard Actions:
let { type, data, props } = action
return { } // just return the new state
}
```
The second function, `render()`, is a pure functional component that gets passed the current `state` instead of `props`, and a second argument `action()` - a function that creates a bound dispatcher for the given action type:
```js
// Render is a functional component with little twist
function render(state, action) {
// action() creates a dispatcher for an action type:
return
}
```
### Simple Example: Counter
```js
// Remember:
// `state` is the current state.
// `action` is a redux standard action.
function reduce(state, action) {
switch (action.type) {
case '@@INIT': return { count: 0 }
case 'ADD': return { count: state.count+1 }
}
}
function render(state, action) {
return (
Current count: {state.count}
Add 1
)
}
stateMachineComponent(reduce, render)
```
### Full Example: To-Do List
```js
const ToDos = stateMachineComponent(
// (state, action)
({ todos, text }, { type, data, props }) => {
switch (type) {
case '@@INIT':return { todos: props.todos || [], text: '' };
case 'ADD': return { todos: todos.concat(text), text: '' };
case 'TEXT': return { text: data.target.value };
}
},
// state, action(type)
({ todos, text }, action) => (
State Machine ToDos
{todos.map( todo => - {todo}
)}
)
);
```
### License
[MIT License](https://oss.ninja/mit/developit) © [Jason Miller](https://jasonformat.com/)