鉴于您有一些全局视图(例如,显示加载屏幕),您可能希望在许多情况下发生这种情况,是否更适合为该行为创建操作创建者/操作对或使用减少器相关的行动处理过渡?
这很难简洁地描述,为了说明我的意思,这里有几个例子。哪个更好,为什么?
function showLoading () {
return 'SHOW_LOADING';
}
function hideLoading () {
return 'HIDE_LOADING';
}
function fetchPostsRequest () {
return 'FETCH_POSTS_REQUEST';
}
function fetchPostsSuccess () {
return 'FETCH_POSTS_SUCCESS';
}
function doSomethingAsync () {
return dispatch => {
dispatch(showLoading());
dispatch(fetchPostsRequest());
// other logic
dispatch(hideLoading())
dispatch(fetchPostsSuccess());
}
}
function rootReducer (state = {}, action) {
const payload = action.payload;
switch(action) {
case 'SHOW_LOADING':
Object.assign({}, state, {isLoading: true})
break;
case 'HIDE_LOADING':
Object.assign({}, state, {isLoading: false})
break;
// other reducers for handling success/request stuff
}
}
function fetchPostsRequest () {
return 'FETCH_POSTS_REQUEST';
}
function fetchPostsSuccess () {
return 'FETCH_POSTS_SUCCESS';
}
function fetchPostsFailure () {
return 'FETCH_POSTS_FAILURE';
}
function doSomethingAsync () {
return dispatch => {
dispatch(fetchPostsRequest());
// good
dispatch(fetchPostsSuccess());
// bad
dispatch(fetchPostsFailure());
}
}
function rootReducer (state = {}, action) {
const payload = action.payload;
switch(action) {
case 'FETCH_POSTS_REQUEST':
Object.assign({}, state, {isLoading: true})
break;
case 'FETCH_POSTS_SUCCESS':
Object.assign({}, state, {isLoading: false /* other logic */})
break;
case 'FETCH_POSTS_FAILURE':
Object.assign({}, state, {isLoading: false /* other logic */})
break;
}
}
我更喜欢A因为在一个地方描述这些行为而不是重复国家管理的逻辑似乎更明智,但我在redux社区听到一个行动应该描述发生或正在发生的事情的格言,而不是而不是命令式的命令。在这种情况下,这只是一个语义问题,其中的术语类似于" ASYNC_OPERATION_START"比#34; SHOW_LOADING"?
更好答案 0 :(得分:7)
想想这段特殊代码将如何发展 用它来做决定。
例如,您可能有多个可以加载的项目。您最终可能会有两个项目列表并排在另一个下面。因此,您将希望它们具有单独的isLoading
状态,就像它们具有单独的ID列表一样。
两种选项中的代码如何变化?似乎较少的操作更简单,因为这可以使特定列表的isLoading
状态保持接近其他信息,也不用担心您忘记在动作创建器中重置其状态。所以在这种情况下,我选择选项B.
另一方面,如果我们正在讨论像显示用户界面通知这样的用例,我可能会将其作为单独的操作解雇。它完全独立于导致它的服务器响应:通知需要在一段时间后隐藏,两个通知可能同时存在于屏幕上等等。因此,使用此用例,选项A似乎更合适。
一般来说,你应该问自己: