Гибкий - мой магазин получает данные, но мой компонент не может общаться с магазином
Обычно при загрузке домашней страницы запускается действие, которое извлекает данные из базы данных в форме JSON. Он отправляет УСПЕХ, который получает мой магазин, и обновляет состояние объекта, 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 Developer Tools.
Вот этот магазин:
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;
Может кто-нибудь помочь мне?
Спасибо
1 ответ
Похоже, вы не предоставляете контекст для своего приложения. Вам необходимо создать экземпляр приложения Fluxible в компоненте React верхнего уровня.
Чтобы решить эту проблему, создайте новый компонент верхнего уровня и установите его в качестве точки входа следующим образом:
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);
}
};
Это должно работать!