https://github.com/launchscout/wc-state-reducers
A state management library for web components that is so small you probably don't even need it
https://github.com/launchscout/wc-state-reducers
Last synced: 7 months ago
JSON representation
A state management library for web components that is so small you probably don't even need it
- Host: GitHub
- URL: https://github.com/launchscout/wc-state-reducers
- Owner: launchscout
- Created: 2018-09-06T22:22:43.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T11:29:43.000Z (over 3 years ago)
- Last Synced: 2025-01-18T08:42:48.725Z (over 1 year ago)
- Language: JavaScript
- Size: 572 KB
- Stars: 0
- Watchers: 5
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# wc-state-reducers
wc-state-reducers is a very small library for managing state in an application built with
web components. It expects web components to:
* get data passed to them via properties or attributes
* render appropriately when new data is given to them
* emit Custom Events when something happens that may change state
wc-state-reducers exports a createStore function as follows:
`createStore(element, reducers, subscribers, initialState?)`
The `element` is a DOMElement which "owns" the store in the sense that `stateChange` events are dispatched from this element. If you only need a single store for the page, it is fine to use `document`.
The `reducers` argument is an object whose keys are custom event names, and values are functions of the form `(currentState, eventDetail) => newState`. The eventDetail is the detail property of the CustomEvent. The `currentState` argument is the existing application state which may be destructured to pick off specific elements a given reducer is interested in. The return value is the new application state which is used as the payload in a `stateChange` Custom Event.
The store object returned has the following functions:
* `subscribe`, which expects to receive a function which will get invoked with the current state as an argument on state changes.
This module also exports:
`dispatch(element, name, eventDetail)`
This is a lil helper function which dispatches a bubbling custom event (this is important!) with the specified name and detail.
## Example
To see it in action:
* [Total Weight](https://github.com/gaslight/wc-state-reducers-example)
* [Tic Tac Toe](https://github.com/gaslight/litelement-tic-tac-toe)