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