Unlimited Machine Works React bindings.
yarn add react-umw.import { connect, Provider } from 'react-umw';.The flow is somehow similar to Redux, but instead of creating a store, you create a machine.
Read the Working With Machines section of the UMW docs to learn how to build a machine.
Then like Redux, you add give that machine to a Provider.
// App.js
// ... Imports here
import { Provider } from 'react-umw'
const UMW = require('unlimited-machine-works')
class App extends Component {
constructor(props) {
super(props)
// Initial data contained in the machine
const initialData = {
speed: 0
}
// Machine configuration
const machineConfig = {
'IDLE': {
'MOVE': {
to: 'MOVING',
action: (data, args) => {
return {...data, speed: 1}
}
}
},
'MOVING': {
'ACCELERATE': {
to: 'MOVING',
action: (data, args) => {
return {...data, speed: data.speed + 1}
}
},
'STOP': {
to: 'IDLE',
action: (data, args) => {
return {...data, speed: 0}
}
}
}
}
// Creates a machine with the given data and config
this.machine = UMW.summon(initialData, machineConfig)
}
render() {
return (
<div className="App">
<Provider machine={this.machine}>
<Body />
</Provider>
</div>
);
}
}
export default App
To use the machine we'll need to use the connect() function.
// Body.js
// ... Imports
import { connect } from 'react-umw'
class Body extends Component {
move = () => this.props.do('MOVE')
accelerate = () => this.props.do('ACCELERATE')
render() {
return (
<p className="App-intro">
{this.props.speed}
<button onClick={this.move}>Move</button>
<button onClick={this.accelerate}>Accelerate</button>
</p>
);
}
}
export default connect()(Body);
The connect function accepts a mapDataToProps and mapDoToProps functions, similar to their Redux counterparts. If none is provided, it will provide all the data as props.
You'll get the do function as props, which is the do function of the given machine.
You'll also get the is function which checks if the machine is in that state.
MIT
FAQs
Unlimited Machine Works React bindings.
We found that react-umw demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.