Tag: react redux

如何优化React + Redux中嵌套组件的小道具更新？: 示例代码： https ： //github.com/d6u/example-redux-update-nested-props/blob/master/one-connect/index.js 观看现场演示： http : //d6u.github.io/example-redux-update-nested-props/one-connect.html 如何优化嵌套组件的道具的小更新？我有上面的组件，回购和RepoList。我想更新第一个回购的标签（第14行）。所以我派出了一个UPDATE_TAG动作。在我实现了shouldComponentUpdate之前，调度需要大约200ms，这是预料之中的，因为我们正在浪费大量时间差异<Repo/> s没有改变。添加shouldComponentUpdate ，调度需要大约30ms。在生产生成React.js之后，更新仅花费约17ms。这是好得多，但在Chrome开发控制台的时间表视图仍然表明无框架（超过16.6毫秒）。想象一下，如果我们有这样的更新，或者<Repo/>比现在更复杂，我们将无法保持60fps。我的问题是，对于嵌套组件的道具的这种小的更新，是否有更高效和规范的方式来更新内容？我还可以使用Redux吗？我得到了一个解决scheme，用一个可观察的内部减速器replace每个tags 。就像是 // inside reducer when handling UPDATE_TAG action // repos[0].tags of state is already replaced with a Rx.BehaviorSubject get('repos[0].tags', state).onNext([{ id: 213, text: 'Node.js' }]); 然后我使用https://github.com/jayphelps/react-observable-subscribe在Repo组件里订阅它们的值。这很好。即使有React.js的开发版本，每个调度也只需要5ms。但是我觉得这是Redux中的反模式。更新1 […]

Redux中mapToDispatchToProps（）的参数时，“dispatch”不是函数: 我是一个javascript / redux /反应初学者构build一个小应用程序与redux，react-redux，和反应。出于某种原因，当使用mapDispatchToProps函数与connect（react-redux绑定）结合使用时，我收到一个TypeError，指示当我尝试执行生成的prop时dispatch不是函数。当我调用dispatch作为道具时（参见提供的代码中的setAddr函数）。我很好奇这是为什么，在Reduce文档的示例TODO应用程序中，mapDispatchToProps方法是以相同的方式设置的。当我在console.log（调度）函数里面说调度是types对象。我可以继续使用dispatch这种方式，但我会更好地知道为什么会发生这种情况，然后再继续使用redux。我正在使用webpack与babel-loaders进行编译。我的代码： import React, { PropTypes, Component } from 'react'; import { connect } from 'react-redux'; import { setAddresses } from '../actions.js'; import GeoCode from './geoCode.js'; import FlatButton from 'material-ui/lib/flat-button'; const Start = React.createClass({ propTypes: { onSubmit: PropTypes.func.isRequired }, setAddr: function(){ this.props.dispatch( setAddresses({ pickup: this.refs.pickup.state.address, dropoff: […]

了解React-Redux和mapStateToProps: 我想了解react-redux的连接方法，以及它作为参数所需要的function。特别是mapStateToProps 。我理解它的方式， mapStateToProps的返回值将是一个从状态派生的对象（因为它mapStateToProps在存储中），其键将作为道具传递给目标组件（应用组件连接）。这意味着您的目标组件所消耗的状态与存储在您的商店中的状态可能具有非常不同的结构。这个可以吗？这是预期的吗？或者，这是你所谓的反模式？

如何在Redux中显示执行asynchronous操作的模式对话框？: 我正在构build一个需要在某些情况下显示确认对话框的应用程序。比方说，我想删除的东西，然后我会派遣一个像deleteSomething(id)的行动，所以一些减速器会捕获该事件，并将填充对话框减速器，以显示它。当这个对话框提交时，我怀疑。该组件如何根据第一个动作派发适当的动作？行动创造者应该处理这个逻辑吗？我们可以在减速器内添加动作吗？编辑：使其更清晰： deleteThingA(id) => show dialog with Questions => deleteThingARemotely(id) createThingB(id) => Show dialog with Questions => createThingBRemotely(id) 所以我试图重用对话框组件。显示/隐藏对话框不是问题，因为这可以很容易地在减速器中完成。我想指定的是如何根据在左侧开始stream动的动作从右侧分配动作。