嗨,我实际上正在尝试使用 Flux、ReactJS 和 Fluxible 开发一些小应用程序,但在处理商店时遇到了问题。
事实上,我可以通过操作向我的商店发送信息,但我不知道如何在组件内部的商店中接收 this.emitChange 的结果来刷新屏幕。
我应该在组件中放入什么来刷新列表?
这是我的组件:
import React from 'react';
class Client extends React.Component {
constructor (props) {
super(props);
this.myListView = [];
}
add(e){
this.context.executeAction(function (actionContext, payload, done) {
actionContext.dispatch('ADD_ITEM', {name:'toto'});
});
}
render() {
return (
<div>
<h2>Client</h2>
<p>List of all the clients</p>
<button onClick={this.add.bind(this)}>Click Me</button>
<ul>
{this.myListView.map(function(title) {
return <li key={name}>{name}</li>;
})}
</ul>
</div>
);
}
}
Client.contextTypes = {
executeAction: React.PropTypes.func.isRequired
};
export default Client;
这是我的商店
import BaseStore from 'fluxible/addons/BaseStore';
class ListStore extends BaseStore {
constructor(dispatcher) {
super(dispatcher);
this.listOfClient = [];
}
dehydrate() {
return {
listOfClient: this.listOfClient
};
}
rehydrate(state) {
this.listOfClient = state.listOfClient;
}
addItem(item){
this.listOfClient.push(item);
this.emitChange();
}
}
ListStore.storeName = 'ListStore';
ListStore.handlers = {
'ADD_ITEM': 'addItem'
};
export default ListStore;
更新
this.setState应用得不好
_onStoreChange() {
console.log(this.getStoreState()) // gives me the good list
this.setState(this.getStoreState()); // doesn't update the list, this.myListView gives [] always
}
最佳答案
您可能希望将 myListView
放入组件的状态中,并在实例化时从存储中填充它。
所以你的组件最终会是这样的:
import ListStore from '../stores/ListStore';
class MyComponent extends React.Component {
static contextTypes = {
getStore: React.PropTypes.func.isRequired,
executeAction: React.PropTypes.func.isRequired
}
constructor(props) {
super(props);
this.state = this.getStoreState();
this.boundChangeListener = this._onStoreChange.bind(this);
}
getStoreState () {
return {
myListView: this.context.getStore(ListStore).getItems()
}
}
componentDidMount () {
this.context.getStore(ListStore).addChangeListener(this.boundChangeListener);
}
componentWillUnmount () {
this.context.getStore(ListStore).removeChangeListener(this.boundChangeListener);
}
_onStoreChange () {
this.setState(this.getStoreState());
}
add(e){
this.context.executeAction(function (actionContext, payload, done) {
actionContext.dispatch('ADD_ITEM', {name:'toto'});
});
}
render () {
return (
<div>
<h2>Client</h2>
<p>List of all the clients</p>
<button onClick={this.add.bind(this)}>Click Me</button>
<ul>
{this.state.myListView.map(function(title) {
return <li key={name}>{name}</li>;
})}
</ul>
</div>
);
}
}
这样,您将监听更改并触发组件上的 setState
,从而导致重新渲染。
更新add
方法
在上面的原始代码中,我不确定单击时执行操作的方式是否正确。也许可以尝试:
add(e) {
this.context.executeAction(function(actionContext, payload, done) {
actionContext.dispatch('ADD_ITEM', payload);
done();
}, {name: 'toto'});
}
关于javascript - Reactjs 使用 Fluxible 从 store 获取事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32377076/