1.0.7 • Published 6 years ago
fluxez v1.0.7
Fluxez
Flux architecture for React app. Fast and easy to apply
Samples
Create actions
import flux from "fluxez";
export const Increase = flux.action();
export const Decrease = flux.action();
Create a reducer
import flux from "fluxez";
import { Increase, Decrease } from "./actions";
flux.reduce((state, action, by = 1) => {
if (action === Increase) {
return {
...state,
counter: state.counter + by
};
}
if (action === Decrease) {
return {
...state,
counter: state.counter - by
};
}
return state;
});
Init store state
import flux from "fluxez";
import { Increase, Decrease } from "./actions";
flux.merge({
counter: 0
});
Create a view
import flux from "fluxez";
import { Increase, Decrease } from "./actions";
const CounterHOC = flux.connect(state => ({
counter: state.counter
}));
cosnt Counter = CounterHOC(props => {
return (
<div>
<h1>{props.counter}</1>
<button onClick={Increase}>Increase</button>
<button onClick={() => Decrease(2)}>Decrease by 2</button>
</div>
);
});
Advanced Usages
Change state processor
import flux from "fluxez";
import update from "immhelper";
// using update method of immhelper for updating state
flux.configure({
stateProcessor: update
});
// so reducer becomes
flux.reduce((state, action, by = 1) => {
if (action === Increase) {
// return update specs for immhelper
return {
// x is current value of counter
counter: [x => x + by]
};
}
if (action === Decrease) {
// return update specs for immhelper
return {
// x is current value of counter
counter: [x => x - by]
};
}
return state;
});
Put logic inside action
It easy for centralizing your logic per Action
import flux from "fluxez";
export const Increase = flux.action((by = 1, state) => {
return {
...state,
counter: state.counter + by
};
});
Create reducer for single action
import flux from "fluxez";
import { Increase } from "./actions";
flux.reduce(Increase, (payload, state, action) => {
// reducer logic here
});
Create reducer for multiple actions
import flux from "fluxez";
import { Increase, Decrease } from "./actions";
flux.reduce(Increase, Decrease, (payload, state, action) => {
// reducer logic here
});
Code splitting
You can define action / reducer anytime and anywhere. It good for dynamic module importing
todo module
import flux from "fluxez";
// todo state
flux.merge({
todos: {},
todoIds: []
});
const AddTodo = flux.action(payload => {
// add action logic here
});
const RemoveTodo = flux.action(payload => {
// remove action logic here
});
profile module
import flux from "fluxez";
// profile state
flux.merge({
profile: {}
});
const UpdateProfile = flux.action(payload => {
// update profile action logic here
});
Add middleware
import flux from "fluxez";
flux.use((state, action, payload) => {
if (payload && payload.fetch) {
const {
fetch: { url, type = "json", loading, success, failure, ...options },
...theRest
} = payload;
fetch(url, options)
.then(res => res[type]())
.then(success, failure);
if (loading) {
return flux.transfer(loading, theRest);
}
}
return state;
});
const fetchUsers = flux.action();
fetchUsers({
fetch: {
url: "https://api.github.com/users",
success(payload) {
expect(Array.isArray(payload)).toBe(true);
done();
}
}
});