Thesmo-react NPM

What is Thesmo React?

Thesmo React is React bindings for Thesmo Redux store.

Why should I try it?

It makes possible to perform any operation with Redux state with one API line (both updating and obtaining data) at any nested level in declarative manner.
Many preset state operations you can use from Thesmo packages (see Related packages section).
Easy integration in existing projects since this package does not affect your React code (you need only to set entry point with Begin method).
It gives you possibility to export state logic in separate modules and use them in required components.
Thesmo React approach helps you to write modular and scalable applications with readable sources which is easy to test and modify.
It's simple and lightweight.

Are there any examples?

Of course! Click here to take a look at Thesmo React example.

API

API methods clarification

Begin

Signature

/* arguments object */
({ 
    React: React, 
    RootComponent: React.ComponentClass | React.FC,
    rootComponentProps?: object,
    defaultReduxState?: any,
    useReduxDevTools?: boolean
})
/* returns */
React.ComponentElement

Usage example

const React = require("react");
const ReactDOM = require("react-dom");
const { Begin } = require("thesmo-react");

function RootComp() {
    return <div>Hello</div>
}

ReactDOM.render(
    Begin({ 
        React, 
        RootComponent: RootComp 
    }),
    document.getElementById("root")
);

FromState

Signature

/* arguments object */
({ 
    at: string | string[], 
    calcField?: (source: any) => any
})
/* returns */
any

Usage example

const React = require("react");
const ReactDOM = require("react-dom");
const { Begin, FromState } = require("thesmo-react");

function RootComp() {
    return <div>Hello {FromState({at: "a.b.c"})}</div>
}

ReactDOM.render(
    Begin({
        React, 
        RootComponent: RootComp,
        defaultReduxState: {a: {b: {c: "world!"}}}
    }),
    document.getElementById("root")
);

ToState

Signature

/* arguments object */
({ 
    /*
        if empty string will be passed in "at" parameter,
        calcField will be applied to whole state
    */
    at: string | string[],
    calcField: (source: any) => any
})
/* returns */
null

Usage example

const React = require("react");
const ReactDOM = require("react-dom");
const { Begin, FromState, ToState } = require("thesmo-react");
const { Set } = require("thesmo-calc-fields-base"); 

function RootComp() {
    const increment_a_b_c_field = () => ToState({
        at: "a.b.c", 
        calcField: (x = 0) => x + 1
    });
    const rewriteWholeData = () => ToState({
        at: "a", 
        calcField: Set({ 
            value: { b: { c: Math.random() } } 
        })
    });

    return <div>
        <div>Whole storage - {JSON.stringify(FromState({ at: "" }))}</div>
        <div onClick={increment_a_b_c_field}>
            Click here to increment a.b.c value (current value - {FromState({ at: "a.b.c" })})
        </div>
        <div onClick={rewriteWholeData}>
            Click here to rewrite whole data
        </div>
    </div>
}

ReactDOM.render(
    Begin({
        React, 
        RootComponent: RootComp
    }),
    document.getElementById("root")
);

ToStateStatic

Signature

/* arguments object */
({ 
    at: string | string[], 
    calcField: (source: any) => any
})
/* returns */
null

Usage example

const React = require("react");
const ReactDOM = require("react-dom");
const { Begin, FromState, ToState, ToStateStatic } = require("thesmo-react");

function RootComp() {
    const staticUpdate = () => ToStateStatic({
        at: "a", 
        calcField: (x = 0) => x + 1
    });
    const update = () => ToState({
        at: "a", 
        calcField: (x = 0) => x + 1
    });

    return <div>
        <div>Whole storage - {JSON.stringify(FromState({ at: "" }))}</div>
        <button onClick={staticUpdate}>
            Increment value with static update (no global rerender)
        </button>
        <button onClick={update}>
            Increment value with common update
        </button>
    </div>
}

ReactDOM.render(
    Begin({
        React, 
        RootComponent: RootComp
    }),
    document.getElementById("root")
);