我想知道在使用API时在Flux中创建商店时的最佳实践或惯例是什么
假设我们有一个'项目'列表,API调用最终会填充_projects中名为ProjectStore的商店
然后,当用户选择项目时,您希望加载项目特定数据.您是否会将此添加到与_activeProject相同的ProjectStore中,或者为它创建一个单独的Store？
当您在该项目中加载Todo时也是如此.将它们放入TodoStore是有意义的,但是项目中Todos中的特定Todo呢？
我希望上面有道理:)
我一直在学习很多关于flux +为即将到来的项目做准备,它将使用React + Flux(alt实现).虽然所有的概念都清楚我对通量架构以及它们如何连接在一起.我对如何处理页面/视图特定数据有疑问.
在大规模多功能应用程序中,应用程序范围的状态/数据(如身份验证状态或其他全局功能)应该由flux action/store处理以轻松处理跨组件状态.如果它处于角度1应用程序中,则这些数据/状态将转到工厂.
但是,对于特定于页面/视图的数据/状态,它几乎不会在顶级组件之间进行通信,那么仅管理组件状态中的数据会更有意义吗？例如,如果我的应用程序包含非常不相关的不同迷你应用程序(例如天气预报视图和计算器),如果其内部管理状态,是否会使组件更易于重复使用？
我只是想象如果我有一个自包含其状态的"计算器"组件,它将有一个非常独立的可重复使用的计算器组件,我可以放在我的应用程序的任何地方,但是,如果计算器状态存储在一个flux存储,那么组件将具有更多的依赖关系.最后,如果我希望将来在我的应用程序中允许两个计算器实例,如果使用flux存储,我必须更改结构,以便在商店中包含一个instance-id.然而,如果使用组件状态,我只需要创建两个组件.
我对React + flux仍然相对较新,仍然试图让所有的概念都正确.如果有的话,随时纠正我.
虽然我的场景非常具体,但我认为它在Flux中提出了一个更大的问题.组件应该是来自商店的简单数据呈现,但是如果组件呈现有状态的第三方组件会怎样？如何在遵守Flux规则的同时与第三方组件进行交互？
所以,我有一个包含视频播放器的React应用程序(使用clappr).一个很好的例子就是寻求.当我点击进度条上的某个位置时,我想要寻找视频播放器.这就是我现在所拥有的(使用RefluxJS).我试图将我的代码删除到最相关的部分.
var PlayerActions = Reflux.createActions([
'seek'
]);
var PlayerStore = Reflux.createStore({
listenables: [
PlayerActions
],
onSeek(seekTo) {
this.data.seekTo = seekTo;
this.trigger(this.data);
}
});
var Player = React.createClass({
mixins: [Reflux.listenTo(PlayerStore, 'onStoreChange')],
onStoreChange(data) {
if (data.seekTo !== this.state.seekTo) {
window.player.seek(data.seekTo);
}
// apply state
this.setState(data);
}
componentDidMount() {
// build a player
window.player = new Clappr.Player({
source: this.props.sourcePath,
chromeless: true,
useDvrControls: true,
parentId: '#player',
width: this.props.width
});
},
componentWillUnmount() {
window.player.destroy();
window.player = null;
},
shouldComponentUpdate() { …我是flux/redux数据流的新手,我试着理解它们之间的主要区别.
你能否突出一下这些差异？比如每个人的利弊？
谢谢
我的app结构如下(HighOrderComponent是Alt的AltContainer包装器):
<App>
<HighOrderComponent store={someStore...}>
<MyCanvasComponent ref="canvasRef" />
</HighOrderComponent>
</App>
我需要公开一个collectData()方法,MyCanvasComponent因为一旦在App组件中单击按钮,画布需要将其内容转换为base64图像.
我想,在button的click处理程序,才能够使用this.refs.canvasRef.collectData().
不幸的是,似乎refs没有考虑嵌套组件.我知道一般refs应该被认为是私人的(即属于HighOrderComponent)但是 -
它们也不可用,这意味着如果我分配一个ref="highOrderComponentRef"然后this.refs.highOrderComponentRef会工作但this.refs.highOrderComponentRef.refs.canvasRef不会.
这HighOrderComponent是一个通用组件,因此不知道它的孩子会是什么.
该this.props.children上HighOrderComponent是ReactElement轻量且不会暴露自己的方法类型.
到目前为止唯一的解决方案是传递MyCanvasComponent一个回调函数,它将自己发送一个回调函数并保存一个引用,但是根据React 0.13发行说明,这很乏味且反对最佳实践
ref resolution命令稍有改动,以便在调用componentDidMount方法后立即获得组件的引用; 只有当组件在componentDidMount中调用父组件的回调时,才应该观察到这种变化,这是一种反模式,无论如何都应该避免
我有一个React/Redux应用程序,可以跟踪用户在本地存储中的身份验证状态.该应用程序也设置为使用服务器端呈现.我在渲染初始应用程序状态时遇到了问题.我的服务器创建一个新商店并发出SET_INITIAL_STATE操作.客户端上的这个初始操作读取localStorage并将经过身份验证的信息传递给我的reducer.但是,由于我使用位于本地存储中的无状态JWT进行身份验证,因此服务器不知道此登录状态.
由于此时服务器和客户端不同步,我收到此错误:
React尝试在容器中重用标记,但校验和无效.这通常意味着您正在使用服务器呈现,并且在服务器上生成的标记不是客户端所期望的.React注入了新的标记来补偿哪些有效,但是你已经失去了服务器渲染的许多好处.相反,弄清楚为什么生成的标记在客户端或服务器上是不同的:
这是有道理的,因为服务器正在尝试呈现未经身份验证的状态.
设置此初始状态的公认标准或惯例是什么,该状态仅依赖于客户可以访问的内容？
我在我的应用程序中使用flux,我Backbone.View用作视图层.
通常有一个存储实例整个页面,该店保存应用程序的数据(或国家),和视图将监听器change的事件store中,当store触发一个change事件,该视图会相应重新渲染本身.
到目前为止好,但我遇到了一些问题,当我使用的形式,在使用时尽量提交表单或blur事件触发的元素,我想以验证服务器的输入,并尽快显示错误,这就是我所做的:
当用户点击提交按钮或为元素更改的值时,我将调度如下操作:
dispatch({type:"validate",value:"value"});
在store将这一行动作出反应,并发送请求给服务器
当响应返回时,我将更新商店并触发change事件:
store.validate_response=response;
store.trigger("change");
我可以显示错误,但我不能保留元素的值,因为表单中的元素被重新渲染,这意味着它们将显示原始值而不是用户键入的值.
我认为在调度validate操作时也保存类型值,如下所示:
dispatch({type:"validate",value:"value",userTypedValueForEveryElement:"....."});
当使用点击提交按钮时它起作用,因为一般当他们点击按钮时他们不会在表单中输入任何内容,但是这种情况怎么样:
<input type="text" id="A" />
<input type="text" id="B" />
用户键入avalue的input A,然后键入bv的input B,在同一时间,我会做验证,并调度操作时同时发送的值:
{a:"avalue",b:"bv"}
该store会保留这些值.
和请求期间,用户继续键入的元素B,现在的价值bvalue,并在同一时间的验证响应返回,那么表单会重新渲染,这将设置avalue为A与bv对B,这是一点,值了在B丢失,用户会感到惊讶,他们不知道发生了什么.
有什么想法解决这个问题？
看来这种flux方式:
view trigger action -->
store respond to actions …我一直在研究一个相当简单的React应用作为学习过程，并希望开始结合Flux（或更可能是Redux）来继续学习。
该代码来实现流量酷似解决办法似乎很简单，但我在什么时候适合，事情应该如何安排在最佳实践意义有点不清楚。
用超外行的术语来说，我对一个常见用例的最佳猜测是Flux允许组件之间相互交谈而无需传递通用的道具，因此请记住，这是我希望在我的产品中使用Flux的示例应用程式：
假设我有一个用户配置文件组件，该组件通过ajax调用定期刷新。在此调用等待返回其数据时，正在页面上其他位置显示加载微调gif-不在触发ajax调用的组件的父级或子级中。在这种情况下，我将如何使用Flux提示微调器在适当的时间显示/隐藏（即，从发送请求开始，到收到响应时结束）？如果它的可见性是由配置文件组件的状态定义的，那很容易，但是显然我需要一个组件与我认为您可以称为远亲的表亲进行通信。
我将如何布置自己的行动，减速器以及如何实现这一目标？
我不是在这里寻找任何人为我编写代码，因为我一定会做得更好，但是我绝对希望在这种情况下使用一些方法学方面的一般建议。
非常感谢！
我正在开始一个新的React应用程序,并且看到生态系统中的所有新闻,我想慢慢地实际考虑我的选择,从React/Webpack/Babel开始,并引入更多.
这些选择中的第一个是否使用Flux(更确切地说,Redux,它看起来很棒并且似乎赢得了助威战争).我就是这样的地方:
为了解决这个问题而不引入新的依赖关系,我发现两篇文章(1:Andrew Farmer,2:Hao Chuan)鼓励使用最近引入的React上下文特性.
→使用context将让我将模型变异回调暴露给我的子组件.对我而言,这听起来不像是一个可怕的误用:我不会传递模型数据,只是引用用于绑定事件处理程序的函数.
谢谢.
我正在尝试在以下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'.`
（我正在使用打字稿）
有谁知道导致此错误的原因是什么？提前致谢！
flux ×10
reactjs ×8
reactjs-flux ×6
redux ×4
javascript ×3
react-redux ×1
refluxjs ×1
state ×1
typescript ×1