❤
npm
Sign UpSign In

react-umw

2.2.1 • Public • Published

react-umw

Unlimited Machine Works React bindings.

forthebadge forthebadge

Contents

Example code

Code Sandbox

react-umw Code Sandbox

Using the Provider

Using the Provider

Using the data and methods as props

Using the data and methods as props

How to import

  1. Run yarn add react-umw.
  2. Import it like this: import { connect, Provider } from 'react-umw';.

How to use

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.

Example Apps

Roadmap

  • Run diff and run setState only when something actually changed.

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i react-umw

Repository

github.com/johnpaulada/react-umw

Homepage

github.com/johnpaulada/react-umw#readme

Weekly Downloads

10

Version

2.2.1

License

MIT

Unpacked Size

48.3 kB

Total Files

5

Last publish

Collaborators

  • johnpaulada
Try on RunKit
Report malware