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>
);
}
}