English | 日本語
Nanox
Nanox is a minimal framework for small projects using React.
It is intended to be used when you want to create a React application using some framework but you do not need to be as big as Redux.
The feeling of use is close to Hyperapp(v1).
Feature
- Low learning costs
- Provides multiple state update methods depending on the purpose
- Because views and actions are separated, it's easy to test each one alone.
Install
$ npm install nanox
Usage
STEP 1 - Create actions
First, create actions to use in child components.
const myActions = // action name is 'increment' { // return partial state that you want to update return count: thisstatecount + count ; } // action name is 'decrement' { // you can return Promise Object that resolve partial state return { ; }; }; ;
STEP 2 - Create child component
Create child component that uses the actions created in STEP1.
In the following example, the actions are received via props
, but you may use Context
instead.
const CounterComponent = { // execute action in click handler return <div> <div>count</div> <button onClick= actions>+1</button> <button onClick= actions>-</button> <button onClick= actions>+100</button> </div> ;}; ;
STEP 3 - Create Nanox container
Create Naxox container to manage actions and child components.
// import React;; // import Nanox; // import actions created in STEP 1; // import child component created in STEP 2; // create container (inherit Nanox) { superprops; thisstate = count: 0 ; } { // pass this.actions to child component props (not this.props.actions) return <CounterComponent actions=thisactions ...thisstate />; }
STEP 4 - Mount the Nanox container
Mount the Nanox container created in STEP 3 to the DOM.
At this time, register the actions created in STEP 1 via props.
ReactDOM;
Examples
Spec of Action
If Action returns values, that must be partial state object or Promise Object.
❌ Bad: return number
const myActions = { return x + y + z; };
✔️ Good: return partial state
const myActions = { return count: x + y + z ; };
✔️ Good: return Promise Object (resolve partial state)
const myActions = { return { ; }; };
✔️ Good: return nothing (no effect on Nanox container)
const myActions = { console; }
Get the current state in actions
You can get the current state in Nanox container from this.state
in the action.
{ super props; // create state in Nanox container thisstate = count: 0 waiting: false ; }
const myActions = { // get the current state in the action const currentState = thisstate; // => { // count: 0, // waiting: false //} };
Note
Since this.state
is a copy of the latest state of the Nanox container, changing this value directly has no effect on the state of the Nanox container.
Advanced Usage
this.query()
Updating state by You can also update the state by MongoDB-like query using this.query()
.
{ superprops; thisstate = // create state in Nanox container fruits: 'apple' 'banana' 'cherry' ; } ;
const myActions = { // call this.query() with $push command, and return functions result return this; } ;
The available commands are here.
In addition to the above commands, you can also add custom commands.
ReactDOM;
const myActions = { // can use $increment command in action return this; } ;
See here for details on how to create custom commands.
Note
Direct specification of state value can not be mixed in this.query()
.
// Badreturn this;
If you want to execute the direct specification of status value and query command simultaneously as above, use $set
command instead of direct specification of status value.
// Goodreturn this;
Action chaining
Calling an action in child components returns a Promise object that resolves when the action is completed, so you can perform multiple actions in sequence.
It is used, for example, to display the indicator when performing long actions in sequence and to clear the indicator when it is completed.
And you can also catch errors that occur in actions using catch
.
return <button onClick= actions ; >Say hello to my friends</button>;
Pre-update hook
You can register a hook method(onSetState()
) that will be executed just before the state is updated by the action.
If onSetState()
process returns false
, this state updating is aborted.
{ // data = partial state or update query that will apply to Nanox state // type = 'state' or 'query' if ... // You can block applying action result to state by returning false at onSetState() return false; } ;
Note
Since the data that is the argument of onSetState()
is a copy of the state part to be updated, changing this value directly will not change the updated contents.
How to use from TypeScript
see here.
License
© 2017-2019 ktty1220