redux - 像显示/隐藏加载屏幕这样的 Action 应该由相关 Action 的reducer处理还是由 Action 创建者自己生成？

Question

鉴于您有一些全局 View (例如，显示加载屏幕)，您可能希望在许多情况下发生这种情况，为该行为创建一个 Action 创建者/ Action 对还是为相关 Action 创建 reducer 更合适处理过渡？

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

一种

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特定列表的状态接近关于它的其他信息，也不必担心您忘记在 Action 创建者中重置其状态。所以在这种情况下，我会选择选项 B。

另一方面，如果我们谈论的是像显示 UI 通知这样的用例，我可能会将其作为单独的操作来触发。它的存在与引起它的服务器响应相当独立:通知需要在一段时间后隐藏，两个通知可能同时出现在屏幕上，等等。因此，对于这个用例，选项 A 似乎更合适。

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

这段代码可能会如何演变？

这两个 Action 真的是同一个 Action 还是它们只是相关但独立？