Error trying to declare my fluxible react.js component in an es6 class

Question

I'm getting this error trying to create my fluxible component with an es6 class declaration:

Warning: getInitialState was defined on SearchResults,
a plain JavaScript class. This is only supported for 
classes created using React.createClass. Did you mean 
to define a state property instead?

I'm going off of this example on the fluxible docs:

http://fluxible.io/api/components.html

Am I declaring my fluxible component correctly? It errors with no initial state so it looks like it's not being called.

import React from 'react';
import SearchStore from '../stores/SearchStore';
import Product from './Product';

    class SearchResults extends React.Component {

        static contextTypes = {
            executeAction: React.PropTypes.func.isRequired,
            getStore: React.PropTypes.func.isRequired
        };

        static propTypes = {
            results: React.PropTypes.array
        };

        static defaultProps = {
            results:[]
        };
        getInitialState () {
            return this.getStoreState();
        }
        getStoreState () {
            return {
                results: this.context.getStore(SearchStore).getResults()
            }
        }
        componentDidMount () {
            this.context.getStore(SearchStore).addChangeListener(this._onStoreChange);
        }
        componentWillUnmount () {
            this.context.getStore(SearchStore).removeChangeListener(this._onStoreChange);
        }
        _onStoreChange () {
            this.setState(this.getStoreState());
        }


        render() {

            var main;

            if (this.state && this.state.results && this.state.results.length) {
                let products = this.state.results.map(function (product) {
                    return (
                        <Product
                            key={product.id}
                            imageUrl={product.image_url_large}
                            description={product.description}
                            name={product.name}
                            maxPrice={product.price_max}
                            minPrice={product.price_min}
                        />
                    );
                }, this);

                main = (
                    <section id="results">
                        <ul id="todo-list">
                            {products}
                        </ul>
                    </section>
                );
            }

            return (
                <div>
                    <header id="header">
                        <h1>Search Results</h1>
                    </header>
                    {main}
                </div>
            );
        }

    }


    export default SearchResults;

Answer 1

You're not supposed to use getInitialState using the ES6 class style for React Components. Instead, initial state belongs in the constructor.

https://facebook.github.io/react/docs/reusable-components.html#es6-classes

The API is similar to React.createClass with the exception of getInitialState. Instead of providing a separate getInitialState method, you set up your own state property in the constructor.

You may also want to check out connectToStores instead of trying to wire it up to the store the way you are now, as well. http://fluxible.io/addons/connectToStores.html