@mvc-react/stateful

mvc-react/stateful

Lean toolkit for 'stateful' MVC use cases in React. It is based on @mvc-react/mvc (see more here).

Installation

npm install --save @mvc-react/stateful

Summary

This package allows you to utilize stateful InteractiveModels in your React application. Statefulness, in this context, simply means that the model properties/functions persist between component renders.

The model's modelView is observable and only changes when altered by the model's interact method. This drastically simplifies state logic and management for React components and hooks which are based on this framework.

Benefits

• Simplifies InteractiveModel state logic
• Is very lean (only depends on built-in React API)
• Is React-DOM agnostic (i.e. can be used with React Native, or any other DOM implementation)
• Confers the benefits of other packages within the @mvc-react ecosystem when integrated with them.

Documentation

StatifiableModel

Represents a Model that can be transformed into a stateful InteractiveModel. It consists of an additional ViewInteractionInterface object whose function is similar to that of a Redux reducer.

ViewInteractionInterface

The interface contains a single function, produceModelView, which accepts a ModelInteraction and returns a Promise for the new corresponding ModelView.

Example:

import { ViewInteractionInterface } from @mvc-react/stateful;

const interface: ViewInteractionInterface<
   CalculatorModelView,
   CalculatorInteraction
> = {
   produceModelView(interaction: CalculatorInteraction) {
      switch (interaction.type) {
         case "add": {
            const { x, y } = interaction.input!;
            return Promise.resolve({ display: x + y });
         }
         case "subtract": {
            const { x, y } = interaction.input!;
            return Promise.resolve({ display: x - y });
         }
         default:
            return Promise.reject("Unhandled interaction");
      }
   }
}

API

useInitializedStatefulInteractiveModel

Constructs stateful InteractiveModel with observable modelView, which is based on the provided viewInteractionInterface and is initialized with provided initialModelView.

useNewStatefulInteractiveModel

Constructs stateful InteractiveModel with observable modelView, which is based on the provided viewInteractionInterface.

useTransformedStatefulInteractiveModel

Transforms provided statifiable model into new stateful InteractiveModel with observable modelView.

See Related

• @mvc-react/mvc
• @mvc-react/components