❤
npm
Sign UpSign In

connect-alt

1.1.5 • Public • Published

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.

Readme

Keywords

Package Sidebar

Install

npm i connect-alt

Repository

github.com/iam4x/connect-alt

Homepage

github.com/iam4x/connect-alt#readme

Weekly Downloads

8

Version

1.1.5

License

ISC

Last publish

Collaborators

  • iam4x
Try on RunKit
Report malware