state-machine-component
A tiny (~250 byte) utility to create state machine components using two pure functions.
Usage
The API is a single function that accepts 2 pure functions as arguments:
The first function, reduce()
, takes in the current state and applies an action
to it, similar to a reducer in Redux:
// Reduce is a redux-style reducer { // 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:
// Render is a functional component with little twist { // action() creates a dispatcher for an action type: return <button onClick= />}
Simple Example: Counter
// Remember:// `state` is the current state.// `action` is a redux standard action. { } { return <div class="counter"> Current count: statecount <button onClick=>Add 1</button> </div> }
Full Example: To-Do List
const ToDos = ;