标签: reactjs-flux

我正在使用pouchDB作为应用程序的本地数据库.我想从PouchDB查询结果并将其加载到React.js中.但是,即使我正在使用waitFor()方法,PouchDB查询的结果也会返回太晚.我想我不明白waitFor()的使用是否正确,也许有人可以对它有所了解.

我有两个商店,DbStore从数据库中检索数据.FileExplorerStore这个商店由我的react组件使用.

DbStore.dispatchToken = AppDispatcher.register(function (payload) {

    var action = payload.action;
    var folder = payload.action.folder
    switch (action.type) {

        case 'OPEN_FOLDER':    
            if (folder === 'start') {
                DbStore.init();
            }
            else {
                DbStore.createPath(folder);
            }
            DbStore.emitChange();
            break;
        default:
        // do nothing
    }


    return true;
});

DbStore有一个函数LoadFiles,它将DB文件加载到_files数组中.为了便于说明,我复制了以下代码:

loadFiles: function (_path) {
            var fileNames = fs.readdirSync(_path);
            _files = [];


            fileNames.forEach(function (file) {
                console.log(file)
                db.query(function (doc) {
                    emit(doc.name);
                }, {key: "bower.json"}).then(function (res) {
                    _files.push(res.rows[0].key)
                });
            });

 }, 

FileExplorerStore有一个从_files数组中检索文件的方法.然后在FileExplorerStore中我有一个getFiles()方法,它将检索这些文件.但是,此数组始终为空,因为此方法将在填充数组之前执行.

FileExplorerStore

FileExplorerStore.dispatchToken = AppDispatcher.register(function (payload) {

var action = …

我知道我需要一个emit.change()调度员,让所有组件都知道商店内部发生了变化.但我不明白为什么我需要调度操作而不是直接从操作中调用存储,

我为什么要这样做:

var Dispatcher = require('dispatcher');
var MyActions = {
    addItem: function(item){
        Dispatcher.dispatch({
              action: 'ADD_ITEM',
              payload: item       
       })
    }
}

而不是这个:

var MyStore = require('mystore');
var MyActions = {
    addItem: function(item){
        MyStore.addItem(item);
    }
}

是的情况下,多个卖场听同样的事件,例如,当StoreA和StoreB听ADD_ITEM呢？

处理深节点中状态更改的最佳方法是什么,这也需要由父节点处理.这是我的情况:

<Table>
  <Row prop={user1}>
    <Column prop={user1_col1} />
    <Column prop={user1_col2} />
  </Row>
  <Row prop={user2}>
    <Column prop={user2_col1} />
    <Column prop={user2_col2} />
  </Row>
  <TableFooter>
    <FooterColumn prop={sum1} />
    <FooterColumn prop={sum2} />
  </TableFooter>
</Table>

每当有人在列属性中更改任何内容时,我只需要在该Column组件中维护此值的状态.但是,我现在想要FooterColumn组件中的这些值的总和.实现这一目标的最佳方法是什么？

如果我要放弃状态改变,我必须将状态保存在多个地方,然后将其传递下去,这是一项繁琐的工作.是最好使用EventEmitters还是我错过了什么？

我在我的react-native应用程序访问途径中有静态图像

  <Image source={require("../assets/preview-full-img-title-logo@2x.png")} />

在开发它显示良好,但在生产发布APK没有显示可能是什么原因？我已经按照这里提到的步骤.

https://facebook.github.io/react-native/docs/signed-apk-android.html

我有一个使用Facebook的Flux架构开发的网络应用程序.该页面有两个视图:一个显示TODO项目列表.第二个视图显示一组随机的TODO项目.

显然,商店需要管理两个问题.第一个是可用的TODO列表.第二个是随机选择的TODO项目列表.

因此TODOStore,我有一个,他唯一关心的是管理可用的TODO项目.它有行动loadTODOs,addTODO,deleteTODO,editTODO.在启动时,此商店不会加载所有TODO项目.我希望它仅在必要时从数据库中检索TODO项目列表.

第二家商店是RandomTODOListStore.它的职责是管理随机选择的TODO项目.在我看来RandomTODOListStore应该通过TODOStore使用来访问TODO项目TODOStore.getTODOItems().

function RandomTODOListStore() {
   var $randomTODOs = [];

   dispatcher.register(function(payload) {
        var action = payload.action;

        switch (action.actionType) {
            case Constants.LOAD_RANDOM_TODO:
                loadRandomTODO();
                break;
        }
    });

    function loadRandomTODO() {
        $randomTODOs = selectRandom(TODOStore.getTODOList());
        emit("change");
    }
}

这个问题是,如前所述,TODOStore它不会在启动时加载TODO项目.

问题是:"如何RandomTODOListStore保证TODOStore已经检索到TODO项目？" .

我在单元测试和磁通数据存储方面遇到了一个有趣的小问题.

由于数据存储是仅实例化一次的单例(当导入模块时),您在单元测试中所做的任何更改都会持续存在.

这可能(并且正在)引起我各种头痛.

我正在实现的解决方案是我在afterEach中运行的每个商店的重置方法,但我想知道/希望有一个更简单的方法来解决这个问题吗？

我使用了Reflux,通常我在进行ajax调用后触发,并且运行良好.出于测试目的,我不需要ajax调用,并且我注意到除非我给出最小5ms的超时,否则触发器将不起作用.这是工作而不是工作的例子.

不工作的例子:

window.threadStore = Reflux.createStore
  init: ->
    @state = @getInitialState()
    @fetchThreads()
  getInitialState: ->
    loaded: false
    threads: []
  fetchThreads: ->
    # ajax call for not Testing, and just trigger for Testing
    @state.threads = FakeData.threads(20)
    @state.loaded = true
    @trigger(@state) # This will NOT work!

window.threadStore = Reflux.createStore
  init: ->
    @state = @getInitialState()
    @fetchThreads()
  getInitialState: ->
    loaded: false
    threads: []
  fetchThreads: ->
    # ajax call for not Testing, and just trigger for Testing
    @state.threads = FakeData.threads(20)
    @state.loaded = true
    setTimeout( =>
      @trigger(@state) # …