我正在努力了解Flux和Reactjs.
考虑以下非常简单的场景:
你有一个输入很少的表格.当用户提交表单时,
ActionCreator.publishAnnouncement(this.state.announcement);
在我的表单组件中调用.这是publishAnnouncement方法的样子:
var publishAnnouncement = function (announcement) {
AnnouncementAPI.publishAnnouncement(
announcement,
successCallback,
failureCallback
)
};
AnnouncementAPI只是一个AJAX http POST调用的包装器.这需要两次回调 - 成功和失败.
现在:我需要在屏幕上显示通知/吐司 - 表示成功或失败. 你会怎么用Flux的方式做到这一点？
我正在考虑创建Notification组件并在我的表单中呈现它.如下:
<Notification title={this.state.notification.title} message={this.state.notification.title} visible={this.state.notification.visibility} // ?? onTimeExceeded ?? />
但是我该如何处理这些回调呢？我应该创建监听ANNOUNCEMENT_PUBLISHING_SUCCEEDED和ANNOUNCEMENT_PUBLISHING_FAILED事件的NotificationStore吗？为了对这些事件做出反应,商店会发出CHANGE事件,从而更新我的通知.
但即使我这样做,我应该如何指示我的通知显示/隐藏？或者更糟糕的是,2秒后出现并隐藏？
我在GitHub上看到很少的组件,每个组件都使用refs等,我个人不喜欢.
总结一下: 你会如何实现这个？或许这样的项目存在？如果是这样,我在哪里可以找到它？
我正在尝试学习Flux模式.
我学会了使用React和.net MVC并将其渲染到服务器端.
我想学习Flux,但所有教程都使用节点js.
我不使用节点.
我不知道如何实现Event Emitter部分,因为它使用节点功能.
https://www.codementor.io/reactjs/tutorial/react-js-flux-architecture-tutorial
下降约1/3:
"事件发射器 - 事件发射器负责在存储完成任何数据操作后通知订户.相反,它还需要能够为特定事件注册观察者.我们将在todo应用程序中使用Node的事件发射器".
鉴于Flux只是一种模式,在没有节点的情况下,我可以使用.net MVC来处理Event Emitter部分吗？
感谢,谢谢.
我已经在这个回购中基于入门套件松散地构建了一个同构的React应用程序.它使用webpack来构建生产代码.
事实上,我需要将服务器上的一些环境变量的值暴露给浏览器中的客户端代码,而无需重建生产代码.我希望能够更改env变量的值,并让它在下一页刷新客户端的效果,而不必重建任何东西.我不想让测试复杂化.
我找到了一些解决方案,其中没有一个很好:
这些方法的问题:
我过去做过2和3,从来没有真正满足这些解决方案.
有什么建议？这似乎应该是一个常见/解决的问题.也许我只是在思考它,3是要走的路.
工具:Reactjs 0.14.0 Vanilla Flux
我需要唯一标识符有两个原因:
所以,假设我有一个如下所示的消息列表:
[
{
id: 1241241234, <-----The unique id is kept here
authorName:"Nick"
text:"Hi!"
},
...
]
现在我使用"Array.prototype.map()" 在所有者组件内创建"ownee"组件(MessageListItem)MessageSection
function getMessageListItem)(message) {
return (
<MessageListItem key={message.id} message={message}/>
);
}
var MessageSection = React.createClass({
render: function(){
var messageListItems = this.state.messages.map(getMessageListItem);
<div>
{messageListItems }
</div>
}
});
但是在MessageListItem中未定义this.props.key,即使我知道在传递它时定义的事实.
var ConvoListItem = React.createClass({
render: function() {
console.log(this.props.key); //Undefined
}
});
我猜有一个原因是React没有让"关键"用作道具.
题:
如果我不能使用密钥作为支柱 - 那么在动态包含状态的子元素列表上处理密钥和设置唯一标识符的二元性需求的正确方法是什么？
我正在研究反应生态系统,我来自AngularJS世界,我不知道应该使用哪种通量实现...
考虑到我喜欢angularjs(1x)的MV*结构,谁能解释什么是最好的？
我找到了很多资源,但我还是有很多疑问!
提前致谢
问题:
在大型React/Redux应用程序中组织容器,组件,操作和减速器的最可维护和建议的最佳实践是 什么？
我的看法:
目前的趋势似乎是围绕相关的容器组件组织redux抵押品(行动,减少器,传奇......).例如
/src
/components
/...
/contianers
/BookList
actions.js
constants.js
reducer.js
selectors.js
sagas.js
index.js
/BookSingle
actions.js
constants.js
reducer.js
selectors.js
sagas.js
index.js
app.js
routes.js
这很棒!虽然这种设计似乎存在一些问题.
问题:
当我们需要访问时actions,selectors或者sagas从另一个容器访问时,它似乎是一种反模式.假设我们有一个/App带有reducer/state 的全局容器,它存储我们在整个应用程序中使用的信息,例如类别和枚举.继上面的例子之后,使用状态树:
{
app: {
taxonomies: {
genres: [genre, genre, genre],
year: [year, year, year],
subject: [subject,subject,subject],
}
}
books: {
entities: {
books: [book, book, book, book],
chapters: [chapter, chapter, chapter],
authors: [author,author,author],
}
},
book: {
entities: {
book: book,
chapters: …所以我有一个auth相关的reducer设置如下:
export default function reducer(state = initialState, action = {}) {
switch (action.type) {
case LOAD:
return {
...state,
loading: true,
}
case LOAD_SUCCESS:
return {
...state,
loading: false,
loaded: true,
jwt: action.jwt,
}
case LOAD_FAIL:
return {
...state,
loading: false,
loaded: false,
error: true,
errorMessage: action.error,
}
case LOGIN:
return {
...state,
loaded: false,
loggingIn: true,
}
case LOGIN_SUCCESS:
return {
...state,
loaded: true,
loggingIn: false,
jwt: jwtDecode(action.result.token),
}
case LOGIN_FAIL:
return {
...state,
loggingIn: false,
user: …我想将路由器参数传递给Vuex动作,而不必为大型表格中的每个动作获取它们,如下所示:
edit_sport_type({ rootState, state, commit }, event) {
const sportName = rootState.route.params.sportName <-------
const payload = {sportName, event} <-------
commit(types.EDIT_SPORT_TYPE, payload)
},
或者像这样,
edit_sport_type({ state, commit, getters }, event) {
const payload = {sportName, getters.getSportName} <-------
commit(types.EDIT_SPORT_TYPE, payload)
},
或者更糟糕的是:从组件道具中抓取参数并将其传递给每次发送的派遣.
有没有办法为大量行动抽象出来？
或者也许是突变本身的替代方法？
我正在看这个Redux教程,其中讨论了以下减速器:
function visibilityFilter(state = 'SHOW_ALL', action) {
return action.type === 'SET_VISIBILITY_FILTER' ?
action.filter :
state
}
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([{
text: action.text, completed: false
}]);
case 'TOGGLE_TODO':
return state.map((todo, index) =>
action.index === index ?
{ text: todo.text, completed: !todo.completed } :
todo
)
default: return state;
}
}
function todoApp(state = {}, action) {
return {
todos: todos(state.todos, action),
visibilityFilter: visibilityFilter(state.visibilityFilter, action)
};
}
它做的事情清楚,但是我不明白为什么它的state.concat …
我有一个代码，我可以在循环中执行一段逻辑，并使用 Flux 之间有一些延迟。像这样的事情，
Flux.defer(() -> service.doSomething())
.repeatWhen(v -> Flux.interval(Duration.ofSeconds(10)))
.map(data -> mapper(data)) //map data
.takeUntil(v -> shouldContinue(v)) //checks if the loop can be terminated
.onErrorStop();
现在，我想要增量延迟。这意味着，在前 5 分钟内，每次执行之间的延迟可能为 10 秒。然后，在接下来的 10 分钟内，延迟可以是 30 秒。并且，此后每次执行之间的延迟可以是一分钟。
我如何使用 Flux 来实现这一目标？
提前致谢。
flux ×10
reactjs ×7
javascript ×6
redux ×3
reactjs-flux ×2
architecture ×1
asp.net-mvc ×1
delay ×1
eventemitter ×1
immutability ×1
java ×1
node.js ×1
react-redux ×1
vue.js ×1
vuex ×1
webpack ×1