React Logux

Logux is a client-server communication protocol. It synchronizes action between clients and server logs.

This React library contains decorator to subscribe Logux on component mount.

Use it with React Redux and Logux Redux. See also Logux Status for UX best practices.

Install

npm install --save react-logux

Usage

First, you need to create Logux client by Logux Redux, wrap your application into <Provider> from React Redux and start Logux Redux connection.

With React Logux you can wrap your components in subscribe decorator. As result, when they will automatically subscribe to data on mount and unsubscribe on unmount.

subscribe accepts component properties as first argument. You can use this properties to define subscription parameters.

const subscribe = require('react-logux/subscribe')

class Users extends React.Component {
  …
}

module.exports = subscribe(({ users }) => {
  return users.map(id => {
    return { channel: `users/${ id }`, fields: ['name', 'photo'] }
  })
})(User)

In this example, <Users users=[10, 15] /> will send this action to server:

{ type: 'logux/subscribe', channel: 'users/10', fields: ['name', 'photo'] }

If you need to define only channel parameters, you can use shortcut:

module.exports = subscribe(({ id }) => `users/${ id }`)(User)

With babel-plugin-transform-decorators-legacy you can use subscribe in decorator syntax:

@subscribe(({ id }) => `users/${ id }`)
class User extends React.Component {
  …
}

hardchiu/react-logux

React Logux

Install

Usage