React Model Store

The simple state management library for React.

This library provides model-based state management with Hooks and Context API of React.

Install

npm install react-model-store

or

yarn add react-model-store

Requirements

• React 16.8.0 or newer

Examples for Typescript

Counter Example (single component pattern)

import React from 'react';
import ReactDOM from 'react-dom';
import { Model, useModel } from 'react-model-store';
 
class CounterModel extends Model {
  count: number = this.state(0);
 
  // Synchronous
  increment = () => this.count++;
 
  // Asynchronous
  decrement = () => setTimeout(() => this.count--, 1000);
}
 
const Counter = () => {
  const { count, increment, decrement } = useModel(CounterModel);
  return (
    <div>
      <p>Count: {count}</p>
      <div>
        <button onClick={increment}>Increment</button>
        <button onClick={decrement}>Decrement</button>
      </div>
    </div>
  );
};
 
ReactDOM.render(<Counter />, document.getElementById('root'));

Todo Example (model provider pattern)

import React from 'react';
import ReactDOM from 'react-dom';
import { Model, createStore, useModel } from 'react-model-store';
 
interface Todo {
  key: number;
  text: string;
}
 
class ControlModel extends Model {
  textInput = this.ref<HTMLInputElement>();
  onAddClick = this.event();
  onKeyPress = this.event<React.KeyboardEvent<HTMLInputElement>>();
 
  get text(): string {
    return this.textInput.current!.value;
  }
 
  refresh(): void {
    this.textInput.current!.value = '';
    this.textInput.current!.focus();
  }
}
 
class LogicModel extends Model {
  private control: ControlModel;
  lastKey: number = this.state(0);
  todos: Todo[] = this.state([]);
 
  constructor(control: ControlModel) {
    super();
    this.control = control;
 
    this.addListener(this.control.onAddClick, () => {
      this.add();
    });
    this.addListener(
      this.control.onKeyPress,
      (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.key === 'Enter') {
          this.add();
        }
      }
    );
  }
 
  add(): void {
    if (this.control.text) {
      this.todos.push({
        key: ++this.lastKey,
        text: this.control.text,
      });
      this.control.refresh();
    }
  }
 
  remove(key: number): void {
    this.todos = this.todos.filter(todo => todo.key !== key);
  }
}
 
class RootModel {
  control = new ControlModel();
  logic = new LogicModel(this.control);
}
 
class TodoModel extends Model {
  todo: Todo;
  onRemoveClick: () => void;
 
  constructor(todo: Todo) {
    super();
    this.todo = todo;
    const { logic } = this.model(RootModelStore);
    this.onRemoveClick = logic.remove.bind(logic, todo.key);
  }
}
 
const RootModelStore = createStore(RootModel);
 
const ControlPanel = () => {
  const {
    control: { textInput, onAddClick, onKeyPress },
  } = useModel(RootModelStore);
  return (
    <div>
      <input type='text' ref={textInput} onKeyPress={onKeyPress} />
      <button onClick={onAddClick}>Add</button>
    </div>
  );
};
 
const TodoItem = (props: { todo: Todo }) => {
  const {
    todo: { text },
    onRemoveClick,
  } = useModel(TodoModel, props.todo);
  return (
    <li>
      <button onClick={onRemoveClick}>Remove</button>
      <span>{text}</span>
    </li>
  );
};
 
ReactDOM.render(  
  <RootModelStore.Provider>
    <div>
      <ControlPanel />
      <ul>
        <RootModelStore.Consumer>
          {({ logic: { todos } }) =>
            todos.map(todo => (
              <li>
                <TodoItem key={todo.key} todo={todo} />
              </li>
            ))
          }
        </RootModelStore.Consumer>
      </ul>
    </div>
  </RootModelStore.Provider>,
  document.getElementById('root')
);

Timer Example (high frequency re-render pattern)

import React from 'react';
import ReactDOM from 'react-dom';
import { Model, createStore, useModel } from 'react-model-store';
 
class RootModel extends Model {
  // RootModelStore.Provider component is re-rendered when this state is changed.
  running = this.state(false);
 
  resetButton = this.ref<HTMLButtonElement>();
 
  onReset = this.event();
 
  onToggle = this.event(() => {
    this.running = !this.running;
    this.resetButton.current!.disabled = this.running;
  });
 
  get toggleText(): string {
    return this.running ? 'Stop' : 'Start';
  }
}
 
const RootModelStore = createStore(RootModel);
 
class HighFrequencyTimerModel extends Model {
  root = this.model(RootModelStore); // use RootModel
 
  // HighFrequencyTimer component is re-rendered when this state is changed.
  time = this.state(0);
  started: number = 0;
  stored: number = 0;
 
  constructor() {
    super();
    this.addListener(this.root.onToggle, this.toggle);
    this.addListener(this.root.onReset, this.reset);
  }
 
  update(): void {
    this.time = this.stored + new Date().getTime() - this.started;
  }
 
  run = () => {
    if (this.root.running) {
      this.update();
      setTimeout(this.run, 50);
    }
  };
 
  toggle = () => {
    if (this.root.running) {
      this.started = new Date().getTime();
      this.run();
    } else {
      this.update();
      this.stored = this.time;
    }
  };
 
  reset = () => {
    this.stored = 0;
    this.time = 0;
  };
}
 
const HighFrequencyTimer = () => {
  const { time } = useModel(HighFrequencyTimerModel);
  return <span>{(time / 1000).toFixed(2)}</span>;
};
 
const Controller = () => {
  const { onReset, onToggle, toggleText, resetButton } = useModel(
    RootModelStore
  );
  return (
    <div>
      <button onClick={onToggle}>{toggleText}</button>
      <button onClick={onReset} ref={resetButton}>
        Reset
      </button>
    </div>
  );
};
 
ReactDOM.render(
  <RootModelStore.Provider>
    <div>
      <div>
        {/*
         * HighFrequencyTimer component is re-rendered frequently.
         * But that re-rendering doesn't cause re-rendering of the provider.
         */}
        <HighFrequencyTimer />
      </div>
      <Controller />
    </div>
  </RootModelStore.Provider>,
  document.getElementById('root')
);