@amir.qasemi/react-framework v0.1.9

React Next State

React Next State is a State Managment library for react.js

Installation

1. Run npm install react-framework
2. Enable decorator in your transpiler (Bable, Typescript or ...)
3. (Optional) Enable decorator metadata

Usage

Wrap react component class with Component decorator and then connect your store to component with AutowireStore or WireStore decorators

To use AutowireStore you must use Typescript and enable emitDecoratorMetadata and give a type to your class property

React component classes:

 // App.tsx
 import { Component, AutowireStore, WireStore } from 'react-framework'
 import { AppStore, MessageStore } from '...'
 
 @Component
 export class App {
    // Typescript
    @AutowireStore
    private vm: AppStore;
    // Pure js or ...
    @WireStore(MessageStore)
    private messageStore;
    
    public render() {
        const { vm, messageStore } = this;
        return (
            <div>
                Hello {st1.projectName}
                <p>Last message is: {messageStore.lastMessage}</p>
            </div>
        );
    }
 }

// Messenger.tsx
 import { Component, AutowireStore } from 'react-framework'
 import { MessageStore } from '...'

 @Component
 export class Messenger {
    private state = {
        value: ""
    }
    @AutowireStore
    private messageStore: MessageStore;
   
    private onChange(e) {
        this.setState({
            value: e.target.value
        });    
    }
    public render() {
        const { messageStore } = this;
        return (
            <>
                <p>Last message is: {messageStore.lastMessage}</p>
                New message: <input onChange={this.onChange.bind(this)} value={this.state.value}/>
                <button onClick={() => messageStore.addMessage(this.state.value)}>Add to messages</button>
            </>
        );
    }
 }

And stores:

// App.Store.ts
import { LocalStore } from 'react-framework'

@LocalStore
export class AppStore {
    public projectName: string = "React Next State"
}

// Message.Store.ts
import { GlobalStore } from 'react-framework'

@GlobalStore
export class MessageStore {
    private messages: string[] = [];
    
    public addMessage(message: string) {
        this.messages.push(message);
    }
    public get lastMessage(): string {
        return this.messages[this.messages.length - 1];
    }
}

The Store Story...

In React Next State, Stores are the State Containers for react application. State of a component are saved in Store classes and only can be changed with Store class methods. In other word, we decided to store state be predictable.

Store Types

• Local Store: Local store must be connect to just one component type. when an instance of component is constructed by react, simultaneously one instance of store is created and attached to component class property which has declared with AutowireStore or WireStore decorator

• Global Store: Global store are not restricted to connect to a specific type of component. if any component change store state, all store consumers will be informed (rerender)

Store Class Property

• Store class properties contains component state.
• A property can be any javascript data types (String, Number, Boolean, Null, Undefined, Object, ...).
• To have predictable state, outeside of store class in component, state of store can only change with store methods and any direct change will be rejected.
• Observability:
  • Those properties which is being used in rednder function will be observable and so if any observable property changes, the consumer component(s) will be rerendered.
  • The properties with Object type (array is a typeof object) is observable with depth of 2.(performance consideration)