Search code examples
javascriptreactjsflux

Alt "connectToStores" deprecated in React/Flux App?


I am building a small chat app with React and Flux via a tutorial, however the tutorial seems to be out of date as it is using a method from Alt (used with Flux) that throws the following error:

Cannot resolve module 'alt/utils/connectToStores'

...which I believe is coming from the line with @connectToStores. Below is my code. I looked into this issue and it seems like Alt was broken up into smaller packages, one of them being Alt-React (which is stumping me completely). My question is, how can I use this method in an up-to-date manner?

import React from 'react';
import mui from 'material-ui';
import MessageList from './MessageList.jsx';
import MessageBox from './MessageBox.jsx';
import Login from './Login.jsx';
import ChannelList from './ChannelList.jsx';
import connectToStores from 'alt/utils/connectToStores';
import ChatStore from '../stores/ChatStore';

// Material UI
import * as Colors from 'material-ui/lib/styles/colors';
import AppBar from 'material-ui/lib/app-bar';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';

@connectToStores // es7 decorator with deprecated 'connectToStores'
class App extends React.Component {
  constructor() {
    super();
  }

  static getStores() {
    return [ChatStore];
  }

  static getPropsFromStores() {
    return ChatStore.getState();
  }

  static childContextTypes = {
    muiTheme: React.PropTypes.object
  }

  getChildContext() {
    return {
      muiTheme: getMuiTheme({
        primary1Color: Colors.blue500,
        primary2Color: Colors.blue700,
        primary3Color: Colors.blue100,
        accent1Color: Colors.pink400
      })
    };
  }

  render() {
    var view = <Login />;

    if (this.props.user) {
      view = (
        <div>
          <div id="content-container">
            <ChannelList />
            <MessageList />
          </div>
          <MessageBox />
        </div>
      );
    }

    return (
      <div>
        <AppBar title="Chat App"/>
        {{view}}
      </div>
    );
  }
}

export default App;

Solution

  • The Alt Utils libraries have all been moved into a separate package at https://github.com/altjs/utils

    Once installed

    npm i --save-dev alt-utils
    

    You can access the same libraries as the tutorial requires using:

    import connectToStores from 'alt-utils/lib/connectToStores';
    import {decorate, bind, datasource} from 'alt-utils/lib/decorators';