Hact Reflux存储在React.createClass中并以正确的方式触发操作

时间:2017-11-06 08:45:54

标签: reactjs refluxjs

我试图将商店挂钩到通过React.createClass定义的反应组件。我已经实现了全球化的状态,但还需要进行大量的重新分解。

我将分享相关代码并在此后继续提问。

操作

var Reflux = require('reflux');
module.exports = Reflux.createActions(['markAllRead']);

商店

var Reflux = require('reflux');
var StoreActions = require('../actions/storeActions/notifications');
var React = require('react');

module.exports = Reflux.createStore({
    init: function(){
        this.listen(StoreActions.markAllRead, this.markAllRead);
        this.state = {
            unreadCount: 5
        };
    },
    markAllRead(count){
        this.state = {
            unreadCount: 1
         };

        this.trigger(this.state);
    }
});

标头组件

var notificationsStore = require('../stores/notifications');
getInitialState: function() {
    // this.state = {}; // our store will add its own state to the component's
    // this.store = notificationsStore; // <- just assign the store class itself
    return {
        notificationsData: this.props.notificationsData,
        state: {},
        store: notificationsStore
    };
},

内部渲染功能

<div onClick={this.toggleNotifications} className='bell' id='bell'>
                                <Glyphicon glyph='bell' id='bell'></Glyphicon>
                                {
                                    this.state.store.state.unreadCount > 0 ?
                                    <span className='notBadge' id='bell'><span id='bell'>{this.state.store.state.unreadCount}</span></span>
                                    : null
                            }
                        </div>
                        <div id='notificationsPanel' className='notificationsPanel'>
                            <NotificationsList list={this.state.notificationsData.notifications} clickHandler={this.clickHandler}/>
                            <div className='footer notification_bar'>
                                <span className='pull-left'><a onClick={this.seeAll}>See all</a></span>
                                <span className='pull-right'><a onClick={this.markAllRead}>Mark all as read</a></span>
                            </div>
                        </div>

... ...

updateReadStatus: function(){

    notificationsStore.markAllRead(); 
},
markAllRead: function(){
    ActionsNotifications.markAllRead().then(this.updateReadStatus); // API call
},

在函数updateReadStatus中,我手动调用store方法(markAllRead)。什么是触发操作的正确方法,因为我已经在商店里听他们了?

其次,我现在收到的商店状态为this.state.store.state.someVariable。如何才能在getInitialState或任何其他功能中简化生活this.state.someVariable? getInitialState中注释的行在 constructor(){} 中很有用,但在我的createClass()

设置中没有

谢谢!

0 个答案:

没有答案