Skip to content
Simple ReasonML state management
OCaml JavaScript HTML
Branch: master
Clone or download
Latest commit 1bbc025 Aug 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Add circleci config Jul 22, 2019
__tests__ Rename equalityFn to areEqual Aug 3, 2019
example Rename equalityFn to areEqual Aug 3, 2019
src Add .rei signature Aug 4, 2019
.gitignore Ignore *.bs.js Jul 22, 2019
LICENSE Prepare package.json Aug 3, 2019
README.md Update README.md Aug 3, 2019
bsconfig.json Fix bs-dev-dependencies Aug 3, 2019
package.json 0.2.1 Aug 4, 2019
restorative.png Add logo Aug 3, 2019
webpack.config.js Separate example Jul 17, 2019
yarn.lock Prepare package.json Aug 3, 2019

README.md

Restorative is a simple ReasonML state management library. Comes with React hooks.

While you can get very far with core ReasonML and React functionality, you may find yourself with global state to manage. Restorative may be your solution. Features a reducer store with performant subscriptions and selectors.

Similar projects in JavaScript include Redux and zustand.

CircleCI

Installation

npm install --save restorative

Add to bsconfig.json

"bs-dependencies": [
  "restorative"
]

Create store

type state = int;
type action =
  | Increment
  | Decrement;

let api =
  Restorative.createStore(0, (state, action) =>
    switch (action) {
    | Increment => state + 1
    | Decrement => state - 1
    }
  );

Basic subscription

let {dispatch, subscribe, getState} = api;
let unsubscribe = subscribe(state => Js.log(state));
dispatch(Increment); // calls subscriptions
getState(); // 1
unsubscribe();

React hook

let {useStore} = api;

[@react.component]
let make = () => {
  let (state, dispatch) = useStore();
  <button onClick={_ => dispatch(Increment)}>
    {React.string(string_of_int(state))}
  </button>;
};

Selector

type state = {
  a: int,
  b: int,
};
type action =
  | IncrementA
  | IncrementB;

let {subscribeWithSelector, dispatch} =
  createStore({a: 0, b: 0}, (state, action) =>
    switch (action) {
    | IncrementA => {...state, a: state.a + 1}
    | IncrementB => {...state, b: state.b + 1}
    }
  );

subscribeWithSelector(state => state.a, a => Js.log(a), ());
dispatch(IncrementA); // calls listener
dispatch(IncrementB); // does not call listener

useStoreWithSelector

[@react.component]
let make = () => {
  let (a, dispatch) = useStoreWithSelector(state => state.a, ());
  // Only updates when a changes
  ...
};

Equality

Restorative will not call listeners if the selected state has not "changed" (entire state if no selector). By default, Restorative uses Object.is for equality checking. All subscribe and useStore functions take an optional ~areEqual: ('state, 'state) => bool.

useStoreWithSelector(
  state => [|state.a, state.b|],
  ~areEqual=(a, b) => a == b,
  ()
);

Comparison with JavaScript libraries

We get all the benefits of Reason's great type system. Instead of plain JavaScript objects, we use variants to model actions. All operations have sound types and some work is moved to compile time (e.g. action creators).

Comparison with React Context

Restorative maintains a list of subscriptions for each store. In contrast, React Context iterates through all children Fiber nodes to find context consumers when the context value changes. React context is not well suited for fast-changing data. Subscriptions, on the other hand, allow for more precise operations at the cost of more complexity (maintaining list of subscribers).

Comparison with Redux

Redux applications typically use a single global store and dispatcher. With Restorative, you can create multiple stores, each with its own dispatcher. This allows better separation of state logic.

You can’t perform that action at this time.