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

Question

鉴于您有一些全局视图(例如,显示加载屏幕),您可能希望在许多情况下发生这种情况,是否更适合为该行为创建操作创建者/操作对或为相关操作创建减少器处理过渡？

这很难简洁地描述,为了说明我的意思,这里有几个例子.哪个更好？为什么？

一个

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"这样的术语比"SHOW_LOADING"更好吗？

Answer 1

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

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

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

另一方面,如果我们正在讨论像显示UI通知这样的用例,我可能会将其作为单独的操作解雇.它相当独立的,导致它的服务器响应的存在:通知需要一段时间后,被隐藏,两个通知可在同一时间住在屏幕上,等,所以,这种情况下使用选项A似乎更适合.

一般来说,你应该问自己:

• 这段代码将如何发展？
• 这两个行为是真的相同还是只是相关但独立？