Reactjs 通过 Fluxible 从商店获取事件

Posted 2023-02-22

【中文标题】Reactjs 通过 Fluxible 从商店获取事件

【英文标题】：Reactjs getting event from store with fluxible

【发布时间】：2015-11-29 08:58:15

【问题描述】：

您好，我实际上正在尝试使用flux、reactjs 和fluxible 开发一些小应用程序，但在处理商店时遇到了问题。

其实我可以通过actions向我的store发送信息，但是我不知道如何在我的组件内部的stores中接收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
    

【参考方案1】：

您可能希望将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');

【讨论】：

这似乎可行，但我在 this.getStoreState 上有一个未定义...：O

感谢您的帮助，React 和 Flux 不是那么容易学的...我遇到了另一个问题 _onStoreChange() this.setState(this.getStoreState()); 不刷新 myListView。第一次真的很难理解为什么。感谢您的帮助

我认为您的add 函数存在一些问题，我将添加另一个更新

我已经更新了我的问题，因为我的问题不存在 :-)

你需要从this.state拉取你的数据所以this.state.myListView