nofux
Unpredictable state container for JavaScript apps. Rethinking best practices, when you're all out of fux to give.
"Any identifier can be globally unique, if you concatenate together enough words with dashes and underscores."
- Mark Erikson, lead maintainer of Redux
https://twitter.com/acemarke/status/1072342186396667905?s=21
Install
npm install --save nofux
We publish CommonJS, ES2015, ESM, and UMD builds. We also include a TypeScript definition file.
UMD
We publish a UMD build inside our npm package. You can use it via the unpkg CDN:
https://unpkg.com/nofux@latest/dist/umd/nofux.min.js
Usage
The central idea of nofux is that all of your application's state is contained in a single, global atom. This state tree is held on the nofux namespace, which is actually an alias to the global object in your JavaScript environment, e.g. window.
To update the state, simply assign a property on nofux! That's it! ...Unless you want your app to update too, in which you need to call this.forceUpdate() on your component.
import nofux from 'nofux';
// or
const nofux = window;
class Search extends React.Component {
render() {
return (
<div>
<input
placeholder="Search..."
value={nofux.search || ''}
onChange={event => {
nofux.search = event.target.value;
this.forceUpdate();
}}
/>
<p>You have typed: {nofux.search || '(nothing yet)'}</p>
</div>
);
}
}No boilerplate, no fancy bindings or actions to dispatch. Truly global state!
Discuss
Everyone is welcome on our Gitter channel!
Credit
I was inspired by this video: https://www.youtube.com/watch?v=6wS5xOZ7Rq8
Note
This is a joke...or is it?
