connect-alt

connect-alt

Decorator for passing alt store state through props, heavily inspired from react-redux::connect

How to / Installation

$ npm i -S connect-alt

II. Provide flux into your app context:

Use AltContainer for an easy integration:

import { render } from 'react-dom';
import AltContainer from 'alt-container';

import Flux from './Flux';
import App from './App';

render(<AltContainer flux={ new Flux() }><App /></AltContainer>);

III. Use into your application

This is the most performant way, it only listen for the specific store changes and not waiting for all stores to update

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import connect from 'connect-alt';

@connect('session')
class Example extends Component {

  static propTypes = { sessionStore: PropTypes.object.isRequired }

  render() {
    const { sessionStore: { currentUser } } = this.props;

    return (
      <pre>{ JSON.stringify(currentUser, null, 4) }</pre>
    );
  }
}

You can pass as many stores you want to the decorator: @connect('session', 'posts', 'foo', 'bar'), you will get them into props with the suffix Store.

III. (Alternative) Use the decorator with a reducer function in your components

Warning, this is expensive because connect-alt will be listening for any stores update and not the only concerned

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import connect from 'connect-alt';

@connect(({ session: { currentUser } }) => ({ currentUser }))
class Example extends Component {

  static propTypes = { currentUser: PropTypes.object.isRequired }

  render() {
    const { currentUser } = this.props;

    return (
      <pre>{ JSON.stringify(currentUser, null, 4)</pre>
    );
  }

}

NOTE: You will need to provide a FinalStore on alt instance:

import Alt from 'alt';
import makeFinalStore from 'alt/utils/makeFinalStore';

class Flux extends Alt {

  constructor(config) {
    super(config);
    this.FinalStore = makeFinalStore(this);
  }

}

export default Flux;

III. (Alternative 2) Combine the stores you listen and the FinalStore reducer

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import connect from 'connect-alt';

@connect('session', ({ session: { currentUser } }) => ({ currentUser }))
class Example extends Component {

  static propTypes = { currentUser: PropTypes.object.isRequired }

  render() {
    const { currentUser } = this.props;

    return (
      <pre>{ JSON.stringify(currentUser, null, 4)</pre>
    );
  }

}

Examples

See isomorphic-flux-boilerplate for a complete app example.