@platform/state.react

React bindings for @platform/state.

 

Install

yarn add @platform/state.react

To see example running in UI see @platform/state.react.tools

 

Getting Started

Define a model and create a store:

import { Store } from '@platform/state';

type IMyModel = {
  count: number;
};

type MyEvent = IIncrementEvent | IDecrementEvent;
type IIncrementEvent = { type: 'TEST/increment'; payload: { by: number } };
type IDecrementEvent = { type: 'TEST/decrement'; payload: { by: number } };


const initial: IMyModel = { count: 0 };
const store = Store.create<IMyModel, MyEvent>({ initial });

 

Configure consuming components to recieve the state-container context:

import { state } from '@platform/state.react'

export class MyView extends React.PureComponent {
  public static contextType = state.Context;
  public context!: state.ReactContext
  public store = this.context.getStore<IMyModel, MyEvent>();
}

 

Render the root of the tree with a context <Provider>:

export const Provider = state.createProvider(store);

export class MyRoot extends React.PureComponent {
  public render() {
    return (
      <Provider>
        <div>...</div>
      </Provider>
    );
  }
}