Fluxible - 我的商店正在接收数据，但我的组件无法与商店交谈答案

【问题标题】：fluxible - my store is receiving data, but my component is not able to talk to the storeFluxible - 我的商店正在接收数据，但我的组件无法与商店交谈
【发布时间】：2016-04-06 17:57:31
【问题描述】：

基本上，在加载主页时，会触发一个以 JSON 形式从数据库中获取数据的操作。它分派我的商店接收到的 SUCCESS 并更新对象的状态 posts。当我从商店console.log() 时，我看到数据确实已收到。但是，我的组件没有获取该数据。

这是我的组件代码：

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;

我在 React 开发者工具的 props 中没有看到帖子数据。

这是商店：

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;

有人可以帮帮我吗？

谢谢

【问题讨论】：

触发操作的地点和时间？

标签： javascript reactjs flux fluxible

【解决方案1】：

您似乎没有为您的应用程序提供上下文。您需要在 top-level React component 上实例化您的 Fluxible 应用程序。

为了解决它，创建一个新的顶级组件并将其设置为您的入口点，如下所示：

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);
    }
};

应该可以！

【讨论】：