react-integration.md

Integrating with React

Full documentation

---

Stent provides a connect helper that creates a HoC. It gets re-rendered every time when the machine updates its state:

import React from 'react';
import { connect } from 'stent/lib/react';

class TodoList extends React.Component {
  render() {
    const { isIdle, todos } = this.props;
    ...
  }
}

// `MachineA` and `MachineB` are machines defined
// using `Machine.create` function
export default connect(TodoList)
  .with('MachineA', 'MachineB')
  .map((MachineA, MachineB) => ({
    isIdle: MachineA.isIdle,
    todos: MachineB.state.todos
  }));

The result of the mapping function goes as props to our component. Similarly to Redux's connect mapStateToProps function. And of course the mapping function is disconnected when the component is unmounted.

Sometimes we want just the state changes subscription. In such cases we may skip the mapping function:

const ConnectedComponent = connect(TodoList).with('MachineA', 'MachineB').map();

mapOnce and mapSilent are also available for this React's helper.

---

Full documentation