const loadUserPosts = async ({ $get, $set }) => {
let [user, posts, comments] = $get('user', 'posts', 'comments');
if (!posts) {
await $set({ loading: true });
posts = await loadPosts(user);
await $set({ loading: false, posts });
}
if (!comments) {
await $set({ loading: true });
comments = await loadComments(user, posts);
await $set({ loading: false, comments });
}
};
Decyphering this: $get is a function that returns ViewModel state values by keys, and $set allows updating these values. This is a matter of personal preference of course, but I think this approach makes the logic much easier to read and understand than Redux thunks or sagas. import ViewModel from 'statium';
import stateToUri from 'urlito';
const defaultState = {
foo: 'bar',
qux: {
time: Date.now(),
},
};
const [getStateFromUri, setStateToUri] = stateToUri(defaultState, [
'foo',
{
key: 'qux.time',
uriKey: 'time',
fromUri: time => parseInt(time, 10),
toUri: time => String(time),
},
});
const Component = () => (
<ViewModel initialState={getStateFromUri}
observeStateChange={setStateToUri}>
{/* ... */}
</ViewModel>
);
That is because to implement accessibility in a grid/tree widget to a meaningful level, you need a lot of underlying code. Even in modern browsers. Source: implemented accessibility in Ext JS framework.
One of the most often asked questions from users of Ext JS was: hey, can we have the Grid widget without all the bloat? Sure, and ~95% of the framework exists so that the Grid can have its features and work reliably across all the browsers. You can probably do without the rest 5%, no biggie.