iam4x / connect-alt

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

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.

connect-alt's Issues

Custom `takeSnapshot` does not serialize store data

Me again! Just a quick one... 😛

Before, when you were using flux.takeSnapshot(), the store's data was being serialized, which was useful when, for example, using alt's immutable store decorator.

Is it possible to have the new takeSnapshot serialize the store's data, also?

Support multiple stores?

I'm using your boilerplate, and I noticed I had to do:

@connect('session')
@connect('requests')
@connect('another')
Class...

Instead of @connect('session', 'requests', 'another')

Allow actions to be passed to match Redux interface

Example:

@connect(({notes}) => ({notes}), {
  noteActions: NoteActions,
  laneActions: LaneActions
})

Demo implementation:

import React from 'react';
import connect from 'connect-alt';

const connectAdapter = (Component, state, actions) => {
  return class ConnectAdapter extends React.Component {
    render() {
      return <Component {...Object.assign({}, this.props, actions)} {...this.state} />;
    }
  };
};


export default (state, actions) => {
  return (target) => connect(state)(connectAdapter(target, state, actions));
};

It would be better if connect-alt did this, though.

Give control over pure rendering?

A part of my application wasn't rendering. I realized this was because pure rendering kicked in. I had a case like this:

@connect('lanes')
export default class App extends React.Component {...}

...
@connect('notes')
export default class Lane extends React.Component {...}

The idea is that the latter component relies indirectly on lanes (contains lane ids against which to filter using those notes). Since it's indirect and I pass just lane ids to Lane, notes weren't changed and it didn't render. I managed to hack around this by attaching another @connect to Lane but that feels a little wrong way to deal with it.

Is there a way to call the methods which stores expose by the way? Looks like connect gives access only to data.

npm install: dist folder is empty

upgrade from 1.0.7 to 1.1.3
dist folder is empty in npm_modules/connect-alt/dist
import connect from 'connect-alt'

fails complaining that connect-alt is not found

import connect from 'connect-alt/src/main.js'

works fine

React Native

Hi will this work with react-native.

Thanks in advance.
:0)

How to access static methods of DecoratedComponent?

Hi again!

I've been playing around with using react-router onEnter hook to fetch async data from the next component/page if needed. I sort of had this working before by doing something like:

const { component } = nextState.routes[1];

if (typeof component.fetchData === 'function') {
   // ... trigger fetchData and then listen to requests store changes
}

I am not sure how to go about this as the component that react-router now provides is the ConnectToStoresWrapper. Any ideas?

Accessing DecoratedComponent[prop] causes TypeError in Safari in production

This line seems to be breaking things on Safari (Version 9.0 (11601.1.56)) and iOS Safari (latest), but only when running in production mode. No idea why.

It seems that accessing DecoratedComponent[prop] will throw a TypeError for certain properties (e.g. there is one called 'arguments'). Adding a try/catch block round the if statement this seems to prevent the error...

The error completely stops the app from bootstrapping on the client.

Pass `props` to `connect` to match Redux interface

It would be good if you could do connect((state, props) => ({...}). Having access to props at connect can be handy if you need to derive some data based on both state and props.