Skip to content

Latest commit

 

History

History
77 lines (53 loc) · 2.75 KB

README.md

File metadata and controls

77 lines (53 loc) · 2.75 KB

nofux

Join the chat at https://gitter.im/jayphelps/nofux build status npm version

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

Try reading the source code!

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.

JSBin Demo

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

Join the chat at https://gitter.im/jayphelps/nofux

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?

:shipit: