标签: reactjs-flux

除了语义之外,是否有任何理由为视图和服务器操作创建不同的调度方法？所有教程和例子我见过的(最明显的是这个)忽略源全部恒定时听有利于有效载荷的动作类型切换出动有效载荷.

我想有一个原因可以解释为什么这种模式在通量例子中很普遍,但我还没有看到一个具体的例子,说明为什么这个有用.据推测,可以添加一个额外的if或开启有效载荷源来确定是否在商店中行动,但是我见过的例子根本没有考虑这个常数.对此的任何想法将非常感激.

我正在研究一种使用助焊剂和反应的简单原型.以前当我使用React时,我已经将子组件中的事件发送到其父组件(已在子组件上注册了prop回调),然后在父组件中更改了状态.

遵循Flux架构是否应通过Dispatcher提升所有事件？例如,即使是一个简单的用户事件,例如选中复选框,也应通过此链引发:

1. 在组件事件处理程序中创建一个操作
2. 发送给调度员
3. 调度员发送到商店
4. store将更改事件发送到控制器视图
5. 控制器视图回调到商店以获取更改

谢谢

我正在学习React JS,这是一个由Facebook创建的javascript库.对于大规模应用,强烈建议使用Flux模式/架构.

问题是React + Flux的所有教程都使用Node ...

我发现缺少使用Flux和.net的教程...

ReactJS.net是使用.net的React的一个很好的起点,但没有在.net上实现Flux模式.

当前与React和Node一起使用的Flux Pattern是否可以与React和.net一起使用？

我在React中有一个可排序的列表,由jQuery UI提供支持.当我在列表中拖放项目时,我想更新数组,以便列表的新顺序存储在那里.然后使用更新的数组重新呈现页面.即this.setState({data: _todoList});

目前,当您拖放项目时,jQuery UI DnD可以正常工作,但UI中项目的位置不会改变,即使页面使用更新的数组重新呈现.即,在UI中,项目将恢复到它在列表中的位置,即使定义其位置的数组已成功更新.

如果将项目拖放两次,则会移动到正确的位置.

    // Enable jQuery UI Sortable functionality
    $(function() {
      $('.bank-entries').sortable({
        axis: "y",
        containment: "parent",
        tolerance: "pointer",
        revert: 150,
        start: function (event, ui) {
            ui.item.indexAtStart = ui.item.index();
        },
        stop: function (event, ui) {
            var data = {
                indexStart: ui.item.indexAtStart,
                indexStop: ui.item.index(),
                accountType: "bank"
            };
            AppActions.sortIndexes(data);
        },
      });
    });

    // This is the array that holds the positions of the list items
    var _todoItems = {bank: []};

    var AppStore = assign({}, EventEmitter.prototype, {
      getTodoItems: function() …

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

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

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

因此，我一直在摆弄：​​最近使用了一些同构的React + Flux，并且发现一些概念实在令人困惑。我一直在研究有关如何构造同构应用程序的最佳实践，并正在寻求建议。

假设您正在创建一个由相同的REST API支持的Web应用程序和一个移动应用程序。您是否将REST API与网络应用程序捆绑在一起？我见过有人提倡捆绑和为REST API建立单独的代码库。

任何建议或建议的阅读表示赞赏！

我尝试将jspm与reactjs一起使用.我工作得很好.但是当我从npm将它与flux软件包集成时.然后它总是抛出Dispatcher不是构造函数错误.我的代码如下

AppDispatcher.js

import Flux from 'flux';
export default new Flux.Dispatcher();

StoreBase.js

'use strict';

import {EventEmitter} from 'events';
import AppDispatcher from '../dispatchers/AppDispatcher';

const CHANGE_EVENT = 'change';

export default class BaseStore extends EventEmitter {
    constructor() {
        super();
    }

    subscribe(actionSubscribe) {
        this._dispatchToken = AppDispatcher.register(actionSubscribe());
    }

    get dispatchToken() {
        return this._dispatchToken;
    }

    emitChange() {
        this.emit(CHANGE_EVENT);
    }

    addChangeListener(cb) {
        this.on(CHANGE_EVENT, cb)
    }

    removeChangeListener(cb) {
        this.removeListener(CHANGE_EVENT, cb);
    }
}

我使用reactjs@0.13.3,al响-router@0.13.3和flux@2.0.3.有人可以帮我吗？

我最近开始使用React,我遇到了输入验证的问题.例如,它只是通过指令在另一个框架中实现为Angular.js.

经过一番研究,我发现了

1. newforms库,看起来像当前时刻盒子里的最佳解决方案.但它非常沉重,不确定它目前是否受支持(7个月前的最后更新).
2. 另一种方法是将事件从父表单发送到其子输入,并在每个表单上调用验证方法.

但我找不到每个人都试图创造自己的最佳实践,因此你需要自己写一些东西.

什么是表单验证的最佳解决方案？React架构/框架(Flux/Redux)是否提供任何解决方案？

谢谢,

我一直在使用Flux和Redux以后很长一段时间,我确实喜欢它们,我看到了它们的好处,但我脑海中浮现的一个问题是:

为什么我们要分解动作和减少器,并在表示改变状态(动作)的意图的调用和更改状态(减速器)的实际方式之间添加额外的间接,以这种方式更难以提供静态或运行时保证和错误检查？为什么不使用修改状态的方法或函数？

方法或函数将提供静态保证(使用Typescript或Flow)和运行时保证(未找到方法/函数等),而未处理的操作根本不会引发任何错误(静态或运行时),您只需要看到预期的行为没有发生.

让我用理论状态容器(TSC)更好地举例说明:

• 这非常简单
• 将其视为React Component的状态接口(setState,this.state),没有呈现部分.

所以,你唯一需要的是触发组件重新绘制时,我们TSC的状态改变,并有可能改变这种状态,这对我们来说将是修改状态平原方法:fetchData,setError,setLoading等.

我看到的是动作和减速器是动态或静态调度代码的分离,因此不是叫myStateContainer.doSomethingAndUpdateState(...)你调用actions.doSomethingAndUpdateState(...),而是让整个flux/redux机器将该动作连接到状态的实际修改.这一切也带来了thunk,sagas和其他中间件处理更复杂动作的必要性,而不是仅使用常规的javascript控制流.

主要问题是这种解耦需要你编写很多东西才能实现这种解耦: - 动作创建者函数的接口(参数) - 动作类型 - 动作有效负载 - 你的状态的形状 - 你如何更新你的状态

将此与我们的理论状态容器(TSC)进行比较: - 您的方法的接口 - 您的州的形状 - 您如何更新您的州

那我在这里错过了什么？这种脱钩有什么好处？

这与其他问题非常相似:Redux动作/减速器与直接设置状态

让我解释为什么对这个问题的最多投票答案不能回答我或原来的问题: - 行动/减少者让你问问谁和如何？这可以通过我们的TSC完成,它只是一个实现细节,与动作/减速器本身无关. - 动作/减少器让你回到你的状态:再次这是状态容器的实现细节问题,可以通过我们的TSC实现. - 等等:状态变更单,中间件以及当前通过操作/减速器实现的任何事情都可以通过我们的TSC来实现,这只是它的实现问题.

非常感谢!弗兰

我正在尝试在以下React组件上实现Flux Util容器：

class App extends React.Component<{},AppState> {
 constructor(props:Readonly<{}>){
    super(props);   
 }
 static getStores(){
    return [ArticlesStore];
 }

 static calculateState(prevState:AppState):AppState{
    return {
        articles:ArticlesStore.getState()
    }
 }
 render() {
    return (
        <main>
            <Navbar></Navbar>
            <Routes></Routes>
        </main>
    );
 }
}


interface AppState{
 /**
  * Articles retrived from the ArticlesState to be used in the rendering of the page
  */
 articles:ArticlesStoreState;
}

export default Container.create(App);

在实现创建容器所需的代码时，我遵循了flux网站上提供的示例以及在GitHub上找到的其他一些代码作为参考。但是在运行此代码时，出现以下错误：

`TypeError: Class constructor App cannot be invoked without 'new'.` 

（我正在使用打字稿）

有谁知道导致此错误的原因是什么？提前致谢！