Rxact React is a React observer for Rxact.

After setup this plugin, the instance of StateStream will have an observer function helping you binding stream's state to react component.

Installation

  yarn add rxact rxact-react

Usage

There are two ways:

1. Install as a plugin

  import { setup, StateStream } from 'rxact'
  import { plugin as rxactReact } from 'rxact-react'

  setup({
    Observable: /** Observable lib you like **/,
    plugins: [rxactReact()],
  })

  const stream = new StateStream('stream', { name: 'rxact' })

  stream.observer(state => ({
    name: state.name,
  }))(
    class ReactComponent extends React.Component {
      ...
    }
  )

2. Enhance StateStream

  import { setup, StateStream } from 'rxact'
  import { decorator as rxactReact } from 'rxact-react'

  const EnhancedStateStream = decorator()(StateStream)

  setup({
    Observable: /** Observable lib you like **/,
    StateStream: EnhancedStateStream,
  })

  const stream = new EnhancedStateStream('stream', { name: 'rxact' })

  stream.observer(state => ({
    name: state.name,
  }))(
    class ReactComponent extends React.Component {
      ...
    }
  )

API

plugin()

Return a StateStream plugin.

decorator()

Return a function for wrapping StateStream.

stateStream.observer()

  stateStream.observer(
    mapStateToProps: ?Function,
    mergeProps: ?Function,
  ): StateStreamPlugin

| Parameter | Type | Description | Default | | ------------- | ---- | ----------- | ------- | | mapStateToProps | Function | Function for mapping stream state to component state. | None | | mergeProps | Function | Function for merging result of mapStateToProps and parent props. | None |

If you are familiar with react-redux, you will find out it is almost as same as connect.

License

MIT