Ontime Connect

What is an Ontime Component? There are the Decorator and Store, who are able to help you not to use complex functionality as Redux or MobX. Sometimes there is a need for small and simple functionality that covers the same functionality form Redux or MobX.

The store is used to help you manage application state container.

Decorator @Connect is used to react to changes in Store.

Below you are able to find example how to use.

How to install

npm install ontime-connect

How to use

// File store.ts
import { Store } from 'ontime-connect';
 
interface IUserStore extends {
  name: string;
  email: string;
}
 
const store = new Store<IUserStore>({
  name: '', 
  email: ''
});
 
export {
  store,
  IUserStore
};

// File UserComponent.ts
import React, { Component } from 'react';
import { Connect } from 'ontime-connect';
import { store, IUserStore } from './store.ts';
 
interface ITestProps {
  name?: string;
  email?: string;
}
 
interface ITestDefProps extends ITestProps {
  name: string;
  email: string;
}
 
@Connect<IUserStore>(store, ['name', 'email'])
class UserComponent extends Component<ITestProps & ITestDefProps> {
 
  public static defaultProps: ITestDefProps = {
    name: '',
    email: ''
  };
 
  render(): JSX.Element {
    const { name, email } = this.props;
 
    if (name && !email) {
      return (<span>{ name }</span>);
    } else if (name && email) {
      return (<span>{ name } ({ email })</span>);
    } else {
      return (<span>Unknown user</span>);
    }
  }
 
}

Store methods

set

set(name: keyof P, value: P[keyof P]): void Set a new value to store

where "P" is generic interface of properties

get

get(name: keyof P): P[keyof P] get value by name from store

@Connect

Connect<P>(store: Store<P>, propsName: string[]) create connection from component to store

P - generic interface of properties

store - instance of class Store

propsName - list of properties names to react on changes