Rxact React

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