相关疑难解决方法(0)

在Flux应用程序中应该在哪里发出ajax请求?

我正在使用flux体系结构创建一个react.js应用程序,我正在尝试弄清楚应该在何时何地从服务器请求数据.这有什么例子吗?(不是TODO app!)

javascript reactjs reactjs-flux

192
推荐指数
3
解决办法
4万
查看次数

如何处理Redux中复杂的副作用?

我一直在努力寻找解决这个问题的方法......

我正在开发一个带有在线记分牌的游戏.玩家可以随时登录和注销.完成游戏后,玩家将看到记分牌,并查看自己的排名,并自动提交分数.

记分牌显示了玩家的排名和排行榜.

截图

当用户完成播放(提交分数)以及用户只想查看他们的排名时,使用记分板.

这是逻辑变得非常复杂的地方:

  • 如果用户已登录,则将首先提交分数.保存新记录后,将加载记分板.

  • 否则,将立即加载记分板.玩家将获得登录或注册的选项.之后,将提交分数,然后记分板将再次刷新.

  • 但是,如果没有要提交的分数(只需查看高分表).在这种情况下,只需下载播放器的现有记录.但由于此操作不会影响记分牌,因此记分牌和玩家记录应同时下载.

  • 有无限数量的级别.每个级别都有不同的记分牌.当用户查看记分板时,用户正在"观察"该记分板.当它关闭时,用户停止观察它.

  • 用户可以随时登录和注销.如果用户注销,则用户的排名应该消失,如果用户以另一个帐户登录,则应该获取并显示该帐户的排名信息.

    ...但是,此信息只应针对用户当前正在观察的记分板进行.

  • 对于查看操作,结果应缓存在内存中,以便如果用户重新订阅同一记分板,则不会提取.但是,如果提交了分数,则不应使用缓存.

  • 任何这些网络操作都可能失败,并且播放器必须能够重试它们.

  • 这些操作应该是原子的.所有状态都应该一次更新(没有中间状态).

目前,我能够使用Bacon.js(功能性反应式编程库)来解决这个问题,因为它提供了原子更新支持.代码非常简洁,但现在它是一个混乱的不可预测的意大利面条代码.

我开始看Redux.所以我尝试构建商店,并想出了类似的东西(用YAMLish语法):

user: (user information)
record:
  level1:
    status: (loading / completed / error)
    data:   (record data)
    error:  (error / null)
scoreboard:
  level1:
    status: (loading / completed / error)
    data:
      - (record data)
      - (record data)
      - (record data)
    error:  (error / null)
Run Code Online (Sandbox Code Playgroud)

问题变成:我在哪里放置副作用.

对于无副作用的动作,这变得非常容易.例如,在LOGOUT行动时,record减速器可以简单地将所有记录都抛出.

但是,某些行为确实有副作用.例如,如果我在提交分数之前没有登录,那么我成功登录,该SET_USER操作将用户保存到商店中.

但是因为我有一个要提交的分数,这个SET_USER动作也必须引发一个AJAX请求,同时设置record.levelN.statusloading.

问题是:当我以原子方式登录时,我如何表示应该发生副作用(得分提交)

在Elm架构中,更新程序在使用形式时也会发出副作用 …

javascript flux redux

45
推荐指数
2
解决办法
8870
查看次数

如何将带父项的状态传递给子组件

是否有任何方式将状态从父组件传递到子组件,如:

var ParentComponent = React.createClass({
  getInitialState: function() {
    return {
      minPrice: 0
    }
  },
  render: function() {
    return (
      <div onClick={this.doSomething.bind(this, 5)}></div>
    );
  }
});

var ChildComponent = React.createClass({
  getInitialState: function() {
    return {
      minPrice: // Get from parent state
    }
  },
  doSomething: function(v) {
    this.setState({minPrice: v});
  },
  render: function() {
    return (
      <div></div>
    );
  }
});
Run Code Online (Sandbox Code Playgroud)

我想从子组件更改父状态值.在react.js有可能吗?

javascript reactjs

9
推荐指数
2
解决办法
4289
查看次数

React Flux:存储依赖关系

所以我最近玩React和Flux架构.

假设存在2个存储A和B.A对B具有依赖性,因为它需要来自B的某个值.因此,每当调度程序调度一个动作时,首先执行B.MethodOfB,然后执行A.MethodOfA.

我想知道这个体系结构的优点是什么优于注册A作为B的监听器,并且每次B发出更改事件时只执行A.MethodOfA?

顺便说一句:想想没有来自facebook的示例调度员的"切换案例"的Flux实现!

javascript state reactjs reactjs-flux

4
推荐指数
1
解决办法
2962
查看次数

标签 统计

javascript ×4

reactjs ×3

reactjs-flux ×2

flux ×1

redux ×1

state ×1