Switch-case free state managment library
npm install clexClex is a state managment library that
- Typed languages friendly
- First class action creators
- Switch-case free
- Easy to use in server side
- View library agnostic
- Inspired by Redux, Elm Architecture and Clean Architecture
js
import { createCore } from 'clex';function incr() {
return { count: this.count + 1 };
}
function decr() {
return { count: this.count - 1 };
}
const core = createCore({
actions: { incr, decr },
model: { count: 0 },
onNext: model => console.log(model.count)
});
// 0
core.actions.incr(); // 1
core.actions.incr(); // 2
core.actions.decr(); // 1
`Example: Who to follow
js
import React from 'react';
import ReactDOM from 'react-dom';
import { createCore } from 'clex';function fetchUsers() {
const randomOffset = Math.floor(Math.random() * 500);
return fetch('https://api.github.com/users?since=' + randomOffset, {
// Set a personal token after getting rate-limited
// headers: { 'Authorization': 'token YOUR_TOKEN' }
})
.then((res) => res.json());
};
function loaded(users) {
return {
loading: false,
users
};
}
function createRefresh(fetchUsers) {
return function refresh() {
// return [(partial)Model, sideEffect]
return [
{ loading: true },
(actions) => fetchUsers().then(actions.loaded)
];
}
}
function App({ onRefreshClick, users, loading }) {
return (
Who to follow
{
users.map(user => - {user.login}
)
}
);
}function present(model, actions) {
ReactDOM.render(
document.getElementById('root')
);
}
createCore({
actions: {
loaded,
refresh: createRefresh(fetchUsers)
},
model: {
loading: false,
users: []
},
onNext: present
});
``