Reactjs 钩住React.createClass中的存储并以正确的方式触发操作

我尝试将存储挂接到通过react.createClass定义的react组件中。我已经实现了一个全球性的状态，但需要做很多重新考虑

我将分享相关代码，然后继续提问

行动

贮藏

标题组件

在function

updateradstatus

中，我手动调用store方法（markAllRead）。当我已经在商店里听到他们的声音时，触发行动的正确方式是什么

其次，我当前接收的存储状态为

this.state.store.state.someVariable

。如何在

getInitialState

或任何其他函数中使生活变得简单，以便只执行

this.state.someVariable

？getInitialState中注释的行在构造函数（）{}中可能很有用，但在我的createClass（）设置中不是这样

---

谢谢

目前还不清楚您使用的是哪种版本的回流，但我将试着给您一个关于如何实现这一点的概述

回流是一个非常简单的通量实现，你有一个非常线性的控制流-

组件-（调用）->操作-（句柄在）->存储-（触发器）->组件

考虑到这一点，您需要遵循一些非常简单的准则。任何组件都只能使用操作来触发存储中的状态更改。存储区必须依次使用

trigger

函数在组件状态更新时触发组件重新渲染。因此，您只需要在组件中调用

markAllRead

方法，该方法依次调用动作

关于长期存储参考问题。。。您应该能够使用各种组件存储连接机制来减少冗长。现在这将取决于你的回流版本，但下面的方法应该有效-

使用mixin将组件连接到存储，这样它不仅可以在存储

触发器调用上重新呈现，还可以在给定的状态变量上公开存储状态。一个简单的例子是-

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

希望这能有所帮助。
我太忙了，无法发布操作实施的更新。回流版本为0.3.0。实际上，我已经使用了连接mixin。不知道为什么我错过了发帖。长调用与使用this.notificationsState=this.state.notifications.state相同内部渲染通知挂在GoEngItLaltNoToCurtssSturn上。但是，快捷方式的解决方案也是正确的。+ 1DRY，如果解决方案对您有用，请考虑接受答案。
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
},

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