A

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社区听到一个行动应该描述发生或正在发生的事情的格言，而不是而不是命令式的命令。在这种情况下，这只是一个语义问题，其中的术语类似于＆＃34; ASYNC_OPERATION_START＆＃34;比＃34; SHOW_LOADING＆＃34;？

更好

Answer 1

想想这段特殊代码将如何发展用它来做决定。

例如，您可能有多个可以加载的项目。您最终可能会有两个项目列表并排在另一个下面。因此，您将希望它们具有单独的isLoading状态，就像它们具有单独的ID列表一样。

两种选项中的代码如何变化？似乎较少的操作更简单，因为这可以使特定列表的isLoading状态保持接近其他信息，也不用担心您忘记在动作创建器中重置其状态。所以在这种情况下，我选择选项B.

另一方面，如果我们正在讨论像显示用户界面通知这样的用例，我可能会将其作为单独的操作解雇。它完全独立于导致它的服务器响应：通知需要在一段时间后隐藏，两个通知可能同时存在于屏幕上等等。因此，使用此用例，选项A似乎更合适。

一般来说，你应该问自己：

这段代码可能会如何演变？
这两个动作真的是同一个还是只是相关而且是独立的？

是否应该通过缩减器处理相关操作或由操作创建者自己生成显示/隐藏加载屏幕等操作？

A

乙

1 个答案: