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
; // this creates a store with context hooks, we should do it uniquely for every storeconst QafStore = ; // every store is a typical React PureComponent {} // or invoke directly // components subscribing to the store will have access to everything in its state state = // state values counter: 0 // actions are regular functions this this ; // lifecycle methods { // e.g. make an async call } // NOTE: don't declare `render`, Qaf will take care of that
The component
; const Counter = <div> /* state values are available */ <div>storecounter</div> /* actions are available */ <button onClick=storeinc>+</button> <button onClick=storedec>-</button> </div>; // inject stores by their keys as defined in `<Provider />` to have them as render props<Subscriber store anotherStore > <Counter ... store anotherStore /></Subscriber> // or through a higher order component, a thin wrapper around `<Subscriber />`Counter;
The app
; // 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).
; // this creates a container with context components, we should do it uniquely for every containerconst QafContainer = ; // which exposes the following components<QafContainerProvider /><QafContainerSubscriber /> // and the following methodQafContainer;
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.
; // this creates a singular container with context components, this is only done onceconst SingularStore Subscriber subscribe = ; // no invocation here, direct inheritance state = counter: 0 this this ; // no need to pass any keys<Subscriber> <Counter ... store /></Subscriber>; // or with a HOC; // 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).