Redux light weight addon for vanjs
npm install vanrxvanrx is an ultra-lightweight Redux addon for VanJS, designed to enhance your VanJS applications with a simple yet powerful state management solution.
- Zero dependencies: Works out of the box with VanJS.
- Simplicity: Easy to integrate and use within your VanJS projects.
- Lightweight: Adds minimal overhead to your application.
To use vanrx in your project, simply include it alongside VanJS.
``bash`
npm install vanrx
vanrx is designed to be simple and easy to use. To get started, simply create a state, give a name, an initial state, and then you can create as many reducers as you want.
`js
import van from "vanjs-core";
import vanrx from "vanrx";
const [createReducer, dispatch, createSelector] = vanrx("Counter", {
count: 0,
});
createReducer("increment", (state, increment) => {
return {
...state,
count: state.count + increment,
};
});
const count = createSelector((state) => state.count);
function Counter() {
return van.tags.div(
() => count.val,
van.tags.button({ onclick: () => dispatch("increment", 1) }, "Increment"),
);
}
van.add(document.body, Counter())
`
function.`js
import van from "vanjs-core";
import vanrx from "vanrx";const [createReducer, dispatch, createSelector, createEffect] = vanrx("Counter", {
count: 0,
});
createReducer("increment", (state, increment) => {
return {
...state,
count: state.count + increment,
};
});
createReducer("decrement", (state, increment) => {
return {
...state,
count: state.count - increment,
};
});
createEffect("increment", () => {
let timerId;
return {
effect: (dispatch) => {
timerId = setTimeout(() => {
dispatch("decrement", 2);
}, 2000);
},
dispose: () => {
clearTimeout(timerId);
},
};
});
const count = createSelector((state) => state.count);
function Counter() {
return van.tags.div(
() => count.val,
van.tags.button({ onclick: () => dispatch("increment", 1) }, "Increment"),
);
}
van.add(document.body, Counter())
``vanrx is open source software. It is free to use and modify under the terms of the MIT license.