标签: flux

Flux操作可以访问商店吗？我最近得到了一个代码审查评论,要求我从React组件中传递一个值,而不是直接从操作中的商店获取它.这将改变Flux的数据流量:

View->Action->Dispatcher->Store-|
  ^-----------------------------<

对此

View->Action->Dispatcher->Store-|
  ^------^----------------------<

在我看来,因为所有数据更改仍然通过调度程序,数据流仍然按预期方向进行,更新仍然是原子的,并且流程仍然很容易推理.可能有任何缺点吗？

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

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

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

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

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

从Flux的TodoMVC示例中,我看到TodoApp组件要求商店获取状态.

视图是否应该创建操作并让调度程序调用商店？

我把自己绑在一个带有React问题的结上,我确信它不会像我现在看起来那么困难.

我正在针对返回资源的RESTful服务器API构建单页面应用程序,以及描述可以使用该资源执行的操作的链接.我正在努力确保我的客户端的ajax调用只使用以这种方式从服务器检索的URL.因此,例如,我的LoggedInSessionStore包含允许我获取所有公共文档列表的URL.

我遇到的问题是如何管理操作和存储之间的依赖关系.例如,当获取所有公共文档的操作触发时,它需要从LoggedInSessionStore获取其URL.但该商店可能尚未填充; 因此,在上一个操作(获取登录会话)完成之前,操作不得触发.

所以,我想要一个可以使用存储在商店中的URL获取服务器数据的操作.确保在该商店填充之前无法触发操作的可接受方法是什么？

我已经找到了很多有关如何获取React和Flux数据的资源,博客和意见,但更不用说将数据写入服务器了.有人可以在构建一个持续更改RESTful Web API的简单编辑表单的上下文中提供"首选"方法的基本原理和一些示例代码吗？

具体来说,哪个Flux盒子应该调用$.post,ActionCreator.receiveItem()调用的位置(以及它做什么),以及商店注册方法中的内容是什么？

相关链接:

• 在使用React + Flux时,操作或存储是否应该负责转换数据？
• 助焊剂存储或行动(或两者)是否应该接触外部服务？
• 在Flux应用程序中应该在哪里发出ajax请求？

我正在学习Flux,我想我理解了工作流程:

View -> Action -> Dispatcher -> Store -> View

但是,我不太明白我应该在哪里填充我的商店的初始状态.

例如,假设我正在编辑联系人.所以我假设我有一个ContactsStore.这是我想象在访问URL时会发生的事情/contacts/edit/23:

1. 不知怎的,我ContactsStore填充了我正在编辑的联系人,在这种情况下,请联系23.数据将来自服务器.
2. 的EditContact视图将从收到通知ContactsStore,所以它会呈现本身在初始状态下.
3. 当我保存联系人时,视图将触发SaveContact操作并且流程将继续.

步骤(1)对我来说不清楚.ContactsStore预计将在哪里填充初始状态？我在哪里打电话给服务器？它在商店吗？

谢谢.

我想问一下在React中快速渲染> 10000个项目的正确方法是什么.

假设我想创建一个checkboxList,其中包含超过动态的10000个复选框项.

我创建了一个包含所有项目的商店,它将用作复选框列表的状态.

当我点击任何复选框项时,它将按操作更新相应的项目,因此商店已更改.

由于存储已更改,因此会触发复选框列表更新.

复选框列表更新其状态并再次渲染.

这里的问题是,如果我点击任何复选框项目,我必须等待> 3秒才能看到勾选复选框.我不希望这只需要重新渲染一个复选框项.

我试图找到根本原因.最耗时的部分是在复选框列表渲染方法中,与.map相关,它创建Checkbox组件以形成componentList ..但实际上只有1个复选框必须重新渲染.

以下是我的代码.我使用ReFlux作为助焊剂架构.

CheckboxListStore

商店将所有复选框项目存储为地图.(名称为键,状态(true/false)为值)

const Reflux = require('reflux');
const Immutable = require('immutable');
const checkboxListAction = require('./CheckboxListAction');

let storage = Immutable.OrderedMap();
const CheckboxListStore = Reflux.createStore({
	listenables: checkboxListAction,
	onCreate: function (name) {
		if (!storage.has(name)) {
			storage = storage.set(name, false);
			this.trigger(storage);
		}
	},
	onCheck: function (name) {
		if (storage.has(name)) {
			storage = storage.set(name, true);
			this.trigger(storage);
		}
	},
	onUncheck: function (name) {
		if (storage.has(name)) {
			storage = storage.set(name, false); …

这是一个关于反应而不是特定问题的架构问题,但是什么被认为是使用布局组件管理状态/道具的最佳实践,以及基于URL呈现的多个子组件？

注意:我知道已经提出了类似的问题,但这有点不同.[ 如何使用React-Router更新基于URL /路径的ReactJS组件

假设我有类似下面的代码:一个配置文件页面(主布局视图),其中包含配置文件子部分的导航链接(设置,首选项,帐户详细信息等),以及一个主面板,其中每个子部分都被渲染.

所以目前我会有这样的东西:我的路由器 routes.js

<Router history={browserHistory}>
  <Route path='/profile' component={Profile} >
    <IndexRoute component={Summary} />
    <Route path='/profile/settings' component={Settings} />
    <Route path='/profile/account' component={Account} />
    <Route path='/profile/preferences' component={Preferences} />
  </Route>
</Router>

以及我的配置文件布局组件profile.js的精简版本

class Profile extends React.Component {

  constructor(props) {
    super(props)
  }

  render(){

    let pathName = this.props.location.pathname;

    return(
      <div className='container profile-page'>
        <div className='side-nav'>
          <ul>
            <li><Link to='/profile'>Summary</Link></li>
            <li><Link to='/profile/settings'>Settings</Link></li>
            <li><Link to='/profile/account'>My Account</Link></li>
            <li><Link to='/profile/preferences'>Preferences</Link></li>
          </ul>
        </div>
        <div className='main-content'>
         {this.props.children}
        </div>
      </div>
    )
  }
}

export default Profile;

所以这种作品.子组件将基于URL呈现.但那我该如何管理州和道具呢？我理解React和Flux的方式,我希望Profile组件管理状态并监听我的商店中的更改,并将这些更改传播给它的子项.它是否正确？

我的问题是似乎没有一种直观的方式将道具传递给this.props.children呈现的组件,这让我觉得我当前的架构和/或对通量的理解是不正确的.

非常感谢一点指导.

因此,我正在考虑将整个翻译对象放入redux商店,然后再保湿到客户端.这个翻译对象大约50kb gzip压缩,115kb未压缩.

我们整个网站都已翻译,因此该翻译对象基本上代表了整个网站的所有非动态副本.如果它在最初的http请求中充当客户端,它应该提供即时浏览体验,至少对于内部副本.

但是,我想知道这是否方式,对于redux商店来说太大了？

我正在尝试使用Spring Webflux创建一个CRUD的简单示例，但是我陷入了一些概念中。

我知道我可以在控制器请求映射方法中返回Flux。但是有时候我想返回404状态，所以我可以以某种方式处理前端。

我在官方文档中找到了一个使用ServerResponse对象的示例：

        public Mono<ServerResponse> listPeople(ServerRequest request) { 
                Flux<Person> people = repository.allPeople();
                return ServerResponse.ok().contentType(APPLICATION_JSON).body(people, Person.class);
        }

如您所见，即使返回是一个列表（Flux）或person，ServerResponse.ok.body也会创建一个Mono。

所以我的问题是：是这样吗？换句话说，如果我有Flux没关系，Spring是否总是返回Mono的ServerResponse（或其他类似的类）？

对于我的404状态，我可以使用类似

.switchIfEmpty(ServerResponse.notFound().build());

但是我在想更多的流媒体方式。例如，我可以逐个元素地处理对象列表。