Bind via Hooks
This approach is only available for functional components as it builds on the react hooks api.
// the counter store is not shown
/**
* Props for { @FuncCounter }
* Here we implement an interface that has the necessary props for stating which store to resolve from the container.
*/
export interface IFuncCounterProps extends IUseStoreFromContainerContextProps
{
}
/**
* Component that shows a counter and is bound via a hook.
* Declare it as an React.SFC.
*/
export const FuncCounter: React.SFC<IFuncCounterProps> = props =>
{
// here we call a hook that returns the state and store itself
const [ storeState, store ] = useStoreStateFromContainerContext<ICounterStore, ICounterStoreState>(props);
// to call an action on a store use the react hook useCallback
const increment = useCallback(() => store.increment.trigger(1), [ store ]);
if (!storeState)
{
return null;
}
return <div>
<div>Hello Func Counter {storeState.counter}</div>
<button onClick={increment}>Increment</button>
</div>;
}
The above code takes care of binding the component to the store state. You can use the component FuncCounter
like any other component.
public render(): any
{
// you can set
// storeRegistrationKey: the key under which the store is registered in the container
// storeInstanceName: any name you like to make multi instancing possible
return <div>
<FuncCounter storeRegistrationKey="ICounterStore" storeInstanceName="FuncCounterStore" />
</div>;
}