clex
v0.0.4
Published
Switch-case free state managment library
Downloads
25
Readme
Clex
Switch-case free state managment library
Clex 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
Example: Counter
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
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 (
<div>
<h1>Who to follow</h1>
<button type="button" onClick={onRefreshClick} disabled={loading}>Refresh</button>
<ul>
{
users.map(user => <li key={user.id}>{user.login}</li>)
}
</ul>
</div>
);
}
function present(model, actions) {
ReactDOM.render(
<App onRefreshClick={actions.refresh} {...model} />,
document.getElementById('root')
);
}
createCore({
actions: {
loaded,
refresh: createRefresh(fetchUsers)
},
model: {
loading: false,
users: []
},
onNext: present
});