标签: flux

在全球事件总线上使用Flux有什么优势？我认为调度员就是所需要的:

1. 组件将数据发布到调度程序的"用户事件"
2. 调度程序执行订阅商店的处理程序
3. handler使用商店的更新属性发布'update event'
4. dispatcher执行订阅组件的处理程序,并使用商店的更新属性更新组件状态

我在这里错过了什么,我不能没有Flux？

使用Node的EventEmitter时,您订阅了一个事件.您的回调仅在该特定事件被触发时执行:

eventBus.on('some-event', function(data){
   // data is specific to 'some-event'
});

在Flux中,您使用调度程序注册商店,然后在调度每个事件时调用您的商店.商店的工作是过滤它获得的每个事件,并确定事件对于商店是否重要:

eventBus.register(function(data){
   switch(data.type){
      case 'some-event':
            // now data is specific to 'some-event'
         break;
   }
});

在此视频中,演示者说:

"商店订阅行动.实际上,所有商店都接收所有行动,这就是保持其可扩展性的因素."

题

为什么以及如何将每个操作发送到每个商店[可能]比仅向特定商店发送操作更具可扩展性？

我很难让减压器变热.

我正在使用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的状态？

我正在尝试用文本输入做一个非常简单的"Hello World".当有人输入文本输入时,它应该更新我的商店的"searchTerm"值.

我无法弄清楚这些事情:1.我怎样才能将输入的值传递给它的"onChange"处理程序？2."搜索"操作似乎被正确调用,但我的reducer函数从未使用过(没有console.log).

SearchForm.js(组件)

import React, {Component, PropTypes} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {search} from 'redux/modules/search-term';

@connect(
  null,
  dispatch => bindActionCreators({ search }, dispatch)
)

export default class SearchForm extends Component {
  static propTypes = {
    search: PropTypes.func.isRequired,
  }

  render() {
    return (
      <input type="text" placeholder="Search" onChange={search} />
    );
  }
}

search-term.js(动作和减速器)

const SEARCH = 'redux-example/repo-filter/SEARCH';

const initialState = {
  searchTerm: null
};

export default function reducer(state = initialState, action = …

我正在使用alt作为项目的助焊器实现,并且无法绕过处理两个相关实体的加载存储的最佳方式.我正在使用sources功能和registerAsync来处理我的async/api调用,并使用AltContainer将它们绑定到我的视图.

我有两个由conversationId一对一关联的实体.两者都通过api调用加载:

一旦我的作业商店加载了数据,我想填写对话商店.

我使用源来加载作业存储:

module.exports = {
    fetchJobs() {
        return {
            remote() {
                return axios.get('api/platform/jobs');

            },....

看起来像waitFor()方法的作业,但似乎在一个商店的内容需要转换或与另一个商店的内容合并时使用.我需要根据另一个数据存储的内容获取一个数据存储的内容.

一般来说,我需要:

• 调用第三方API并将实体列表加载到商店中.
• 当数据到达时,我需要使用上述每个属性调用另一个API并将该数据加载到另一个存储中.

我天真的解决方案是引用作业存储中的对话操作,并在数据到达时发送事件.像这样的东西:

var jobActions = require('../actions/Jobs');
var conversationActions = require('../actions/Conversations');

class JobStore {
    constructor() {
        this.bindListeners({
            handlefullUpdate: actions.success
        });...

    }

    handlefullUpdate(jobs) {
        this.jobs = jobs;
        conversationActions.fetch.defer(jobs);
    }
}

当然,这样做违反了商店不应该发送事件的格言,因此我必须使用延迟在调度中间发送一个动作.这对我来说很有意义,因为它似乎沿着这条路走下去,我在我的代码中重新引入了各种各样的副作用; 失去了我应该看到的"功能性管道"之美.

此外,我的工作存储必须持有对任何依赖实体的引用,以便它可以分派适当的操作.在这里,我只有一个,但我可以想象很多.就实体之间的依赖关系而言,这似乎完全倒退.

我想到了几种选择:

我可以在源/操作中调用api/platform/jobs端点来获取所有对话,只是为了获取id.最初的方法更有效率,但这似乎更为真实,因为我失去了所有的交谈.

我也可以使用单个动作/源来获取两者,返回{jobs:{}, conversations: in the action}(使用promises编排依赖关系)并使用它来填充两个存储.但这种方法对我来说似乎不必要地复杂化(我觉得我不应该这样做!).

但我错过了另一种方式吗？看起来奇怪的是,这样一个常见的用例会破坏磁通天堂的优雅和/或迫使我跳过如此多的箍.

@dougajmcdonald 在这里提出了类似的问题,但也许它的措辞过于普遍,并没有得到任何牵引力:

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

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

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

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

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

我在这里看到这一行作为另一个问题的答案:

"componentWillMount应该是componentDidMount,否则你将在节点中泄漏事件发射器."

我真的不明白.有人可以更详细地解释一下吗？

更多信息:

使用flux构建react应用程序,作为初始渲染的一部分,子组件计算一些数据.理想情况下,在计算此数据之后,我想调用一个动作,用一部分新数据更新商店的状态.

通常,更新商店的状态会发出导致重新呈现的更改事件.但是,因为更改侦听器直到componentDidMount(而不是componentWillMount)才被添加,所以我的顶级组件无法侦听初始渲染期间发生的更改并启动重新渲染.

如果我将addChangeListener移动到似乎可以修复此问题的componentWillMount,但上面的引用表明这是一个坏主意？

我对Redux状态树中的内容感到有些失落.

我看到了关于在状态树中存储什么的两个相互矛盾的陈述.

• React doc告诉我们,只有用户输入应该存储在状态树中.

在原始列表的产品传递中作为道具,所以这不是状态.搜索文本和复选框似乎是状态,因为它们随时间变化并且无法从任何事物计算.最后,过滤的产品列表不是状态,因为它可以通过将原始产品列表与搜索文本和复选框的值组合来计算.

• Redux doc告诉我们,我们经常应该在单个状态树中存储UI状态和数据:

对于我们的待办事项应用,我们希望存储两种不同的东西:

• 当前选择的可见性过滤器;
• todos的实际列表.

您经常会发现需要在状态树中存储一些数据以及一些UI状态**.这很好,但尝试将数据与UI状态分开.

所以React告诉我们不应该存储数据(我说的是todos的数据),对我来说,Redux告诉相反的事情.

根据我的理解,我倾向于React方面,因为React和Redux都旨在通过存储来预测UI状态:

1. 所有无法计算的内容(例如:所有人类输入)并且是UI的一部分:

   • 复选框值
   • 输入值
   • 无线电价值
   • ...

2. 所有可用于构建查询并将其发送到API /数据库的最小数据,这些数据将返回完整的用户配置文件,朋友列表,等等......:

   • 用户身份
   • 创建日期范围
   • 物品ID
   • ...

对我来说,排除所有数据库/ API结果,因为:

• 它站在数据层面
• 可以通过发送权限(并由纯缩减器计算)查询来计算.

那你在这里有什么看法？

React 使用 Flux 架构，并且在https://reactjs.org/docs/thinking-in-react.html 中说 React 有两个模型 -state和props. 并且在 React https://reactjs.org/community/model-management.html 中有一些关于模型管理的建议- 但所有这些似乎都是为了增强 Flux 的一些附加层。我正在寻求答案的大问题是：

• 我应该在 React 中定义模型类吗？即如果我有 Customer 类的概念，那么我可以：1) 将 Customer 的属性直接state/props定义为2) 将 Customer 的属性定义为state.customer/props.customer; 3) 分别定义一些 JavaScript 模板/类Customer，简单地说，state.customer/props.customer就是类型Customer，不要在state/props. 我觉得 3) 是正确的方法，不是吗？
• 如果第三个选项（前一点）是正确的方法，那么我如何定义Customer模板以及如何定义state.customer/props.customer该模板？我可以在一些序列化、一些模型验证任务中使用这些模板，我也可以在 ReactNative 项目中使用。

我对 Spring Boot 中的 SSEemitter 和 Flux 之间的混淆，用于向客户端发送单向异步消息。

想要了解这两个术语与 Spring boot 相关的用例