标签: flux

在过去的几个月里,我一直在学习React和Flux,而我还没有处理过的一件事就是向用户显示错误信息.具体而言,在flux action creator方法中由于ajax http请求而发生的错误消息.

一个简单的例子是用户登录 - 如果由于密码错误导致ajax请求中的登录失败,则服务器会以失败进行响应.那时,在我的flux动作创建器方法中,我唯一的选择是调度包含错误信息的动作,对吧？

我可以发送错误信息并将该错误保存在商店中.不过,我不确定将某些错误绑定到某些组件的最佳方法是什么.假设我的react组件树正在呈现多个错误感知组件,但在服务器端用户身份验证尝试期间发生错误,并且需要在该登录表单中显示.

是否有良好的模式或惯例来存储错误并知道它们适用于哪个组件？是否有一种编程方式来确定这一点,而不是将一些标识符传递给每个动作创建者函数,该函数标识动作创建者被称为它的组件等？

有一篇有趣的文章 描述了在FluxUtils中公开的4个主要类.

1. 商店
2. ReduceStore
3. MapStore(已删除3.0.0)
4. 容器

但是,对于某些情况应该使用什么并不是很清楚.只有2例为ReduceStore和Container,但对于其他可惜没样品.

能否请您解释一下这4个组件的基本用法:当和在那里他们应该在现实生活中使用？

非常感谢扩展答案和代码示例!

更新:

MapStore已删除从开始3.0.0

我一直在使用 Vuex，它坚持只通过它改变状态，mutators或者actions让我认为你的商店应该只包含尽可能平坦的对象，只有原始类型。

一些线程甚至规定规范化您的数据（因此，不是嵌套对象树，而是具有带有 id 数组的对象来指示树关系）。这可能与您的 JSON api 非常匹配。

这让我认为在您的通量存储中存储类（可能有改变自己的方法）是一种反模式。事实上，即使将您商店的数据混合到一个类中，似乎您也在逆潮流而动，除非您的类不对它的内部数据进行任何修改。

这让我想到，在 Vue/Vuex/Reactive/Flux 中使用任何类是一种反模式吗？

这些库似乎明确设计为与普通 JS 对象一起使用，并且您与 API 的一般交互（数据输入、数据输出）让我觉得更实用的方法（无不变性）是原始设计者所考虑的。

编写从function => test => state mutator wrapper around function.

我知道 JS 对象和 JS 类的行为非常相似（并且基本上是同一件事），但我的逻辑是，如果您不考虑类进行设计，那么您更有可能不会用非通量污染您的状态状态变化。

社区中是否普遍认为您的通量代码应该更实用，更少面向对象？

我在我正在研究的项目中使用reactjs和flux体系结构.我对如何将嵌套数据正确地分解到商店以及为什么我应该将数据分成多个商店感到困惑.

为了解释这个问题,我将使用这个例子:

想象一下你有项目的Todo应用程序.每个项目都有任务,每个任务都有笔记.

该应用程序使用REST API检索数据,返回以下响应:

{
    projects: [
        { 
            id: 1, 
            name: "Action Required",
            tasks: [
                {
                    id: 1,
                    name: "Go grocery shopping",
                    notes: [
                        {
                            id: 1,
                            name: "Check shop 1"
                        },
                        {
                            id: 2,
                            name: "Also check shop 2"
                        }
                    ]
                }
            ]
        },
    ]
}

虚拟应用程序的界面在左侧显示项目列表,当您选择项目时,该项目将变为活动状态,其任务将显示在右侧.单击任务时,您可以在弹出窗口中查看其注释.

我要做的是使用1个单独的商店,即"Project Store".操作会向服务器发出请求,获取数据并指示商店使用新数据填充自己.商店在内部保存这个实体树(项目 - >任务 - >注释).

为了能够根据选择的项目显示和隐藏任务,我还在商店中保留一个变量"activeProjectId".基于此视图可以获取活动项目,其任务并呈现它们.

问题解决了.

但是:在网上搜索一下以确定这是一个很好的解决方案后,我看到很多人都说你应该为每个实体使用一个单独的商店.

这意味着:ProjectStore,TaskStore和NoteStore.为了能够管理关联,我可能还需要一个"TasksByProjectStore"和一个"NotesByTaskStore".

有人可以解释为什么这会更好吗？我唯一看到的是管理商店和数据流的大量开销.

我想在创建我的React组件时使用一些抽象.例如:

class AbstractButton extends React.Component {
  render() {
    return (
      <button
        onClick={this.props.onClick}
        className={this.definitions.className}>
        {this.props.text}
      </button>
    }
}
class PrimaryButton extends AbstractButton {
  constructor(options) {
    super(options);
    this.definitions = {
        className: 'btn btn-primary'
    };
  }
}
class SuccessButton extends AbstractButton {
  constructor(options) {
    super(options);
    this.definitions = {
        className: 'btn btn-success'
    };
  }
}

我不想通过这些definitions,props因为我知道这些definitions- 在这种情况下 - 将class永远不会改变.

它是React中的反模式吗？还是可以吗？

我的问题涉及这个altjs问题:这种抽象与之不兼容@connectToStores.

在查看其他开发人员在使用Redux时处理输入焦点的方式时,我遇到了一些针对ReactJS组件的一般指导.然而,我担心的是focus()函数是必不可少的,我可以看到多个组件争夺焦点的奇怪行为.是否有一种处理焦点的redux方式？是否有人使用redux处理实用设置焦点并做出反应,如果有,你使用什么技术？

有关:

• 如何设置焦点在Elm中的元素？
• 在purescript-halogen中创建后自动聚焦输入元素
• https://github.com/cyclejs/cycle-core/issues/153

我不明白为什么我们需要Flux和React作为React本身让我们维护应用程序的状态.每个组件都具有初始状态,并且可以通过用户操作或任何其他异步JavaScript更改状态.

为什么React只能被视为一个视图库,它可以让我们定义应用程序的状态,并在状态发生变化时更新视图.这不是一个视图所做的......它完整的MVC做得对吗？

例如:这里是仅使用React 的Todo应用程序构建,这里是使用Flux和React的Todo应用程序构建.

如果我们只用React构建Todo应用程序那么为什么我们需要Flux？

我正在尝试使用Redux构建一个复杂的全动态应用程序.我的意思是我的应用程序有很多动态生成的表单,其中包含生成的字段 - 即时组件.我想在我的Redux商店中存储有关我的组件的可视数据.但是,如果不将实际数据与可视化组件数据混合,我该怎么办呢？

例如,如果我有这样的结构

Store { 
  visual: {...deeply nested visual-data-tree...}, 
  data: {...deeply-nested real-data-tree...} 
}

渲染组件很困难,因为我需要先搜索可视数据,然后在两棵树中对组件"值"进行反应.

但如果有一个类似于此的结构:

Store {
  form {
    visual: {...form visual data...},
    data: {
      //Ok here the form "data" - widgets. Or it must to be visual? :)
      widget1 {
        visual: {type:"ComboBox", opened: true},
        data: 1
      }
    }
  }
}

你看到了问题,现在我在Form小部件的真实数据中有可视数据.

(表格 - 数据 - widget1 - 视觉)

真实数据中的可视数据超出了概念.

你们如何解决混合数据的相同问题？

对我可怜的英语真的很抱歉.我希望我清楚地解释了这个问题.

我很难让减压器变热.

我正在使用Webpack和react-transform-hmr.有了这个,当我保存时,所有的CSS和组件都是热加载的,但是当我尝试使用其他类型的类型时 - 最明显的是减速器 - 它会告诉我进行全面刷新.

我发现这是因为我需要明确地重新加载reducers并接受事件.我在我的代码中使用的是store.js:

if(module.hot) {
  module.hot.accept('./reducers/', () => {
    const nextRootReducer = require('./reducers/index');
    store.replaceReducer(nextRootReducer);
  });
}

reducers/index 导出根减速器.

但是现在当我运行它时它仍然告诉我[HMR] Cannot check for update (Full reload needed并且还有错误说[HMR] TypeError: currentReducer is not a function

所以 - 我需要一些帮助才能让它发挥作用.代码可以在https://github.com/wesbos/Simple-Redux上找到,你可以通过这样做来重现它:

1. npm install
2. npm start
3. 在浏览器中打开localhost:3000
4. 编辑减速器 - 打开posts.js并将第6行的数字更改为其他任何内容

我试图找出最简洁的方法来加载我的Redux商店的初始状态,当它来自API调用时.

我知道提供初始状态的典型方法是在页面加载时生成服务器端,并将其作为简单对象提供给Redux createStore().但是,我正在编写一个我计划在Electron中打包的应用程序,所以这不起作用.

到目前为止,我能够提出的最好的方法是在创建将要去商店的初始状态的商店后立即触发操作 - 要么检索整个初始状态的一个操作,要么执行多个操作每个都检索商店的一部分的初始状态.这意味着我的代码看起来像:

const store = createStore(reducer, Immutable.Map(), middleware);
store.dispatch(loadStateForA());
store.dispatch(loadStateForB());
store.dispatch(loadStateForC());

虽然这会起作用,但它看起来有点粗糙,所以我想知道是否有一些更好的替代品,我错过了？