xuderflux
v1.0.4
Published
a simple flux implementation
Downloads
32
Readme
#xuderflux ##A simple flux implementation inspired by https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
##Installing
npm install --save xuderflux
or yarn add xuderflux
##Hey, boilerplate yup, there's a tiny bit of boilerplate added in 1.0.0 in order for the api to be able to return a constructor
###but have no fear
it's just a tiny file that is named something like
xuderfluxInstance.js
with the following code:
import Xuderflux from 'xuderflux';
const { modifyState, getState } = new Xuderflux();
export { modifyState, getState }
##The api There are two exposed api entry points.
modifyState
- a function that takes a function that should accept the state, and mutate it.getState
- a function that simply returns the state.
Examples
//replace with the relative location of your xuderflux instance
import { getState, modifyState } from "./xuderfluxInstance";
const initialModifier = state => {
state.foo = "bar";
};
modifyState(initialModifier); //after this runs in the queue, state.foo will be "bar".
//you don't have do declare the functions first if you are only using them once.
modifyState(state => {
state.foo = "baz";
});
//after that runs, state.foo will be "baz".
// now let's reset
modifyState(initialModifier); //this will leave the end result of state.foo to be "bar"
Currently xuderflux does not have an api to notify when a change happens. A function that needs to be exectued only after change in state can be executed inline as follows:
//the thing you want to do
const thingToDo = (stuff) => console.log(stuff);
//add your modifier
modifyState(state => {
state.foo = "bam";
//you can do this if it needs to be executed as soon as possible:
thingToDo(state);
});
//...or add it next, though this doesn't guarantee it happening right away
//it will execute at some point after the first one
modifyState(state => {
thingToDo(state);
});
what's getState
?, well, suppose you wanted the state at the current moment, here it is
getState(); //returns the state at the current moment, see following
//print the current state every second
setInterval(
() => {
console.log(getState());
},
1000
);
##And what about async? ###promises, promises, promises Just return a promise instead of a synchronous function... xuderflux will wait until the promise resolves before running the next modifier.
//axios because it's a popular use case scenario
import axios from "axios";
//modifier that implements a promise, demo taken from the axios readme
const promiseModifier = state => axios
.get("/user?ID=12345")
.then(response => {
state.user = response;
})
.catch(err => state.userErr = err);
//pass it right in
modifyState(promiseModifier);