thesmo-react

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

• Begin
• FromState
• ToState
• ToStateStatic

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")
);

Related packages

• Basic calculating fields (thesmo-calc-fields-base)
• Object calculating fields (thesmo-calc-fields-object)
• Array calculating fields (thesmo-calc-fields-array)
• Dictionary calculating fields (thesmo-calc-fields-dictionary)
• Boolean calculating fields (thesmo-calc-fields-boolean)