Qaf

Features

• Based on React's new context API (16.3.0).
• Every store is a React component.
• Actions, lifecycle methods and more.
• No dependencies, all just React goodness.
• ~2 KB in size, with less than 100 lines of code.

Design

• The app has at least one store, which is just a React component.
• The app has at least one container (default), which is a collection of store instances.
• Each container has a provider that exposes its store instances to its subscribers.
• Any component can subscribe to any store instance provided.

Install

yarn add qaf

Usage

The store

import { createStore } from 'qaf';

// this creates a store with context hooks, we should do it uniquely for every store
const QafStore = createStore();

// every store is a typical React PureComponent
class Store extends QafStore {}

// or invoke directly
class Store extends createStore() {
  // components subscribing to the store will have access to everything in its state
  state = {
    // state values
    counter: 0,

    // actions are regular functions
    inc: () => this.setState(state => ({ counter: state.counter + 1 })),
    dec: () => this.setState(state => ({ counter: state.counter - 1 }))
  };

  // lifecycle methods
  componentDidMount() {
    // e.g. make an async call
  }

  // NOTE: don't declare `render`, Qaf will take care of that
}

The component

import { Subscriber, subscribe } from 'qaf';

const Counter = ({ store }) => (
  <div>
    {/* state values are available */}
    <div>{store.counter}</div>

    {/* actions are available */}
    <button onClick={store.inc}>+</button>
    <button onClick={store.dec}>-</button>
  </div>
);

// inject stores by their keys as defined in `<Provider />` to have them as render props
<Subscriber store anotherStore ..>
  {(store, anotherStore, ..) => <Counter {...{ store, anotherStore, .. }} />}
</Subscriber>

// or through a higher order component, a thin wrapper around `<Subscriber />`
subscribe('store', 'anotherStore', ..)(Counter);

The app

import { Provider } from 'qaf';

// the prop name is the key of the store used earlier in `<Subscriber />`
<Provider store={Store} anotherStore={AnotherStore} ..>
  <Counter />
</Provider>

Advanced

The container

<Provider />, <Subscriber /> and subscribe() are all components of a container, which is a collection of store instances. By default, Qaf exposes a main container that we can immediately put to use, but what if we wanted more than one container? (e.g. we need multiple instances of a single store).

import { createContainer } from 'qaf';

// this creates a container with context components, we should do it uniquely for every container
const QafContainer = createContainer();

// which exposes the following components
<QafContainer.Provider .. />
<QafContainer.Subscriber .. />

// and the following method
QafContainer.subscribe(..);

The singular container

Singular containers are a stripped-down version of Qaf containers, where the app uses one single store that houses all the shared state, actions and lifecycle methods. Singular containers are more performant, they utilize one context instead of having multiple contexts (one for each store) and require less computations (no internal component composition and nesting). However, -and as implied in the terminology- we are limited to the usage of one store only.

• The app has one store, which is just a React component.
• The store acts as a provider that exposes its instance to its subscribers.
• Any component can subscribe to the store instance provided.

import { createContainer } from 'qaf';

// this creates a singular container with context components, this is only done once
const { SingularStore, Subscriber, subscribe } = createContainer({
  singular: true
});

// no invocation here, direct inheritance
class Store extends SingularStore {
  state = {
    counter: 0,

    inc: () => this.setState(state => ({ counter: state.counter + 1 })),
    dec: () => this.setState(state => ({ counter: state.counter - 1 }))
  };
}

// no need to pass any keys
<Subscriber>{store => <Counter {...{ store }} />}</Subscriber>;

// or with a HOC
subscribe(Counter);

// one provider for the whole app
<Store>
  <Counter />
</Store>;

Testing

Qaf stores are React components, we would test them as we would test any other component (Enzyme example).

Examples

Available here (source).