fluxible - my store is receiving data, but my component is not able to talk to the store

Question

Basically, on loading the home page, an action is triggered that grabs data from the database in JSON form. It dispatches a SUCCESS that my store receives and updates the state of an object, posts. When I console.log() from the store, I see the data has indeed been received. However, my component is not getting that data.

Here's my component code:

import React from 'react';
import connectToStores from 'fluxible-addons-react/connectToStores';
import PostStore from '../stores/PostStore';

class Home extends React.Component {

  render() {
      return (
          <div>
              <h2>Home</h2>
              <div></div>
          </div>
      );
  }
}

Home = connectToStores(Home, [PostStore], (context, props) => ({
    posts : context.getStore(PostStore).getPosts()
}))

export default Home;

I don't see the posts data in the props in React Developer Tools.

Here's the store:

import BaseStore from 'fluxible/addons/BaseStore';

class PostStore extends BaseStore {

    constructor(dispatcher) {
        super(dispatcher);
        this.posts = null;
    }

    handleGetPostsSuccess(payload) {
        this.posts = payload;
        console.log("from PostStore",this.posts);
        this.emitChange();
    }

    getPosts() {
        return this.posts;
    }

    //send state to client
    dehydrate() {
        return {
            posts : this.posts
        }
    }

    //server state
    rehydrate(state) {
        this.posts = state.posts;
    }

}

PostStore.storeName = 'PostStore';
PostStore.handlers = {
    'GET_POSTS_SUCCESS' : 'handleGetPostsSuccess'
};

export default PostStore;

Can someone please help me out?

Thanks

Answer 1

It look like you are not providing context to your application. You need to instantiate your Fluxible app at the top-level React component.

In order to resolve it, make a new top-level component and set it as your entry point like so:

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import Fluxible from 'fluxible';
import { FluxibleComponent } from 'fluxible-addons-react';
import Home from './components/Home';

const app = new Fluxible();
app.registerStore(PostStore);

const context = app.createContext();

ReactDOM.render(
    <FluxibleComponent context={context.getComponentContext()}>
        <Home />
    </FluxibleComponent>,
    document.querySelector('.container')
);

Home.js

import React from 'react';
import { provideContext, connectToStores } from 'fluxible-addons-react';
import PostStore from '../stores/PostStore';
import postActions from '../actions/postActions';

class Home extends React.Component {

    dispatchAction() {
        this.context.executeAction(postActions.dispatchPost, { post: 'My Post' });
    }

    render() {
        return (
            <div onClick={this.dispatchAction.bind(this)}>
                <h2>Home</h2>
                <div></div>
            </div>
        );
    }
}

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

Home = provideContext(Home);

Home = connectToStores(Home, [PostStore], (context) => {
    return {
        posts: context.getStore(PostStore).getPosts()
    };
});

export default Home;

postActions.js

module.exports = {
    dispatchPost(actionContext, payload) {
        actionContext.dispatch('GET_POSTS_SUCCESS', payload);
    }
};

That should work!