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.
Company News
/Security News
Socket is an initial recipient of OpenAI's Cybersecurity Grant Program, which commits $10M in API credits to defenders securing open source software.
Security News
Socket CEO Feross Aboukhadijeh joins 10 Minutes or Less, a podcast by Ali Rohde, to discuss the recent surge in open source supply chain attacks.
Research
/Security News
Campaign of 108 extensions harvests identities, steals sessions, and adds backdoors to browsers, all tied to the same C2 infrastructure.