reactjs – React.createClass中的Hook Reflux存储并以正确的方式触发操作

我试图将商店挂钩到通过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或任何其他函数中使生活变得简单,只需执行此操作.state.someVariable？ getInitialState中注释的行在构造函数(){}中很有用,但在我的createClass()设置中没有

谢谢！

目前还不是很清楚你正在使用哪种版本的Reflux,但我会尽量概述你如何才能完成这项工作……

反流是一种非常简单的助焊剂实现,你有一个非常线性的控制流 –

组件 – (调用) – >行动 – (处理) – >商店 – (触发器) – >零件

考虑到这一点,您需要遵循一些非常简单的指导原则.任何组件只能使用Action来触发存储中的状态更改.反过来,商店必须使用触发器功能在其状态更新时触发组件重新呈现.因此,您只需要在组件中调用markAllRead方法,该方法将依次调用该操作.

并且在长商店参考问题上……您应该能够使用各种组件 – 存储连接机制来减少冗长.现在这将取决于您的Reflux版本,但下面应该有效 –

使用connect mixin让您的Component与Store连接,这样它不仅可以在Store触发器调用上重新呈现,还可以在给定的状态变量上公开Store状态.一个简单的例子是 –

var HeaderComponent = React.createClass({
    mixins: [Reflux.connect(notificationStore,"notifications")],
    render: function() {
        // Use "this.state.notifications.unreadCount" etc.
    }
});

希望这可以帮助.