Decorator for passing alt store state through props, heavily inspired from `react-redux::connect`
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.babelrc
.gitignore
CHANGELOG.md
README.md
package.json
yarn.lock

README.md

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.