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

Question

我尝试将存储挂接到通过 React.createClass 定义的 React 组件中。我已经实现了全局状态，但需要进行大量重构。

我将分享相关代码并继续回答问题。

操作

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);
    }
});

header 组件

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中，我手动调用存储方法(markAllRead)。因为我已经在商店里听过，所以触发操作的正确方法是什么？

其次，我当前收到的存储状态为 this.state.store.state.someVariable。如何让 getInitialState 或任何其他函数中的生活变得简单，只做 this.state.someVariable？ getInitialState 中注释的行在 constructor(){} 中很有用，但在我的 createClass() 设置中却没有用

谢谢!

Answer 1

目前还不清楚您使用的是哪个版本的 Reflux，但我会尽力向您提供有关如何完成这项工作的总体概述...

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

组件 -(调用)-> 操作 -(处理)-> 存储 -(触发)-> 组件

考虑到这一点，您需要遵循一些非常简单的准则。任何组件只能使用 Action 来触发 store 中的状态更改。反过来，存储必须使用 trigger 函数在其状态更新时触发组件重新渲染。因此，您只需要在组件中调用 markAllRead 方法来依次调用操作。

关于长存储引用问题...您应该能够使用各种组件 - 存储连接机制来使其不那么冗长。现在这取决于您的 Reflux 版本，但以下应该可以工作 -

使用connect mixin 让您的组件与 Store 连接，这样它不仅可以在 Store 触发调用上重新渲染，而且还可以在给定的状态变量上公开 Store 状态。一个简单的例子是 -

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

希望这有帮助。