标签: flummox

使用flummox(flux)时在哪里获取初始状态?

我正在试图找出加载初始状态的位置,当使用flummox时,一个磁通库.我已经看到它做了几个方面,但我很好奇是否有推荐的方法来做到这一点.让我们说你有一些你已经保存在本地存储或数据库或其他东西的待办事项.你会把它们拿到哪里并让它们进入你商店的状态?

我已经看到它建议在react中执行实际的ajax查询componentDidMount,并触发一个动作,将ajax的结果传递给该动作.该数据将流入商店的状态,并作为初始状态返回到视图中.

我也看到它建议在动作本身内部执行ajax,flummox似乎很好地支持他们的异步等待支持.我想在这种情况下你只是触发了一些初始状态动作?

reactjs reactjs-flux flummox

5
推荐指数
1
解决办法
418
查看次数

反应 - 身份验证过程:无法在分派过程中分派

我已经开始通过flummox、react-bootstrap和react-router玩react。我正在尝试为我的网站创建一个基本的同构 CMS。

语境 :

在身份验证方面,每个用户都有一个功能列表,每个组件都使用我的身份验证存储“可以”显示或不显示的方法等......

我在顶部有一个用户导航栏,在 reat-router 处理的每个页面上都可见,带有一个登录/退出按钮,如果用户未登录,则基本上会在单击带有登录表单的模态时显示,否则会显示注销确认。

当用户登录时,我希望更新当前显示的页面上的组件(注销相同)。

这是一个页面示例,该页面显示一个列表,该列表只能由具有适当权限的经过身份验证的用户查看:

过程 :

  1. 当用户提交表单时,我调用一个动作
  2. 动作向服务器发送请求
  3. 该操作由更新其 currentUser 的身份验证存储注册
  4. 该组件有一个 currentUser 属性,并使用 componentWillReceiveProps 来检查这个属性是否改变并调用一个动作来请求列表
  5. 该操作由更新其项目的商店注册

问题:无法在调度过程中调度

Hack :第二个动作放在 setTimeout 中

问题: 我阅读了很多关于这个特定问题的答案,据说在同一个调度程序周期内调用两个操作是糟糕的设计。所以我的问题是:有没有更好的方法来设计这个过程?

PS:如有必要,我可以发布一些代码。

flux reactjs react-bootstrap react-router flummox

5
推荐指数
0
解决办法
323
查看次数

了解如何使用Flummox实现Flux架构

我目前有一个非常简单的React应用程序,它使用state来确定几个视图.单击submit元素将触发对通过登录或注册凭据的端点的简单调用.我可以继续沿着这条路走下去,使用从服务器返回的React和JSON来确定我的观点,但我知道处理数据的方式并不合适.

我的问题是,从这里开始,如何使用Flummox实现Flux模式?我是否使用有效负载触发操作并在操作或商店中进行API调用?我正在尝试理解从我的UI中的动作到我的API调用进行此往返的正确方法,以获取响应和UI响应商店的更改.

下面是我的Auth组件的代码.我想看一个如何在这种情况下使用Flummox的示例,这样我就可以理解扩展和添加功能所需的内容.

Auth.jsx

'use strict';

var React  = require('react');
var request = require('request');

var Auth = React.createClass({

  getInitialState: function() {
    return {
      name: '',
      email: '',
      pass: '',
      passConfirm: '',
      login: true,
      register: false
    };
  },

  handleLogin: function(){
    this.setState({
      login: true,
      register: false
    });
  },

  handleRegister: function(){
    this.setState({
      register: true,
      login: false
    });
  },

  handleName: function(event){
    this.setState({
      name: event.target.value
    });
  },

  handleEmail: function(event){
    this.setState({
      email: event.target.value
    });
  },

  handlePass: function(event){
    this.setState({
      pass: event.target.value
    });
  },

  handlePassConfirm: function(event){
    this.setState({
      passConfirm: …
Run Code Online (Sandbox Code Playgroud)

flux reactjs reactjs-flux flummox

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