https://github.com/ramonvictor/dumbx-js
A very dumb way of using some Redux principles
https://github.com/ramonvictor/dumbx-js
microlib state-management vanilla-js
Last synced: 2 months ago
JSON representation
A very dumb way of using some Redux principles
- Host: GitHub
- URL: https://github.com/ramonvictor/dumbx-js
- Owner: ramonvictor
- Created: 2017-05-20T14:19:06.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-05-21T19:58:47.000Z (about 8 years ago)
- Last Synced: 2025-03-21T07:36:02.588Z (3 months ago)
- Topics: microlib, state-management, vanilla-js
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# dumbx-js
[](https://badge.fury.io/js/dumbx)
A very dumb way of using some Redux principles.
# Usage
First of all, instantiate the store:
```js
const Dumbx = require('./dumbx');
const store = new Dumbx({
state: {
isPlaying: false,
music: ''
},
setters: {
pause(state) {
state.isPlaying = false;
},
play(state) {
state.isPlaying = true;
},
selectMusic(state, payload) {
state.music = payload.name;
}
}
});
```
Then, on the UI component, subscribe for store updates:
```js
// Component render example
const render = () => {
console.log(store.getState().isPlaying);
};
// Subscribe render returns unsubscribe function
const unsubscribe = store.subscribe(render);
```
Dispatch actions on user interactions (example):
```js
// Dispatching actions
const pauseBtn = document.querySelector('#pause');
const playBtn = document.querySelector('#play');
pauseBtn.addEventListener('click', () => {
store.dispatch('pause'); // store.getState().isPlaying => `false`
});
playBtn.addEventListener('click', () => {
store.dispatch('play'); // store.getState().isPlaying => `true`
});
document.addEventListener('DOMContentLoaded', () => {
store.dispatch('selectMusic', {
name: 'Awesome!'
}); // store.getState().music => 'Awesome!'
});
```
Optionally, unsubscribe whenever component is distroyed:
```js
const destroy = () => {
unsubscribe();
};
```
# Testing locally
Run the example file with:
```
$ node example.js
```