6

鉴于您有一些全局视图（例如，显示加载屏幕），您可能希望在许多情况下发生这种情况，是否更适合为该行为创建一个动作创建者/动作对，或者为相关动作创建一个 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”更好吗？

4

1 回答 1

8

想想这段特定的代码将如何演变。
使用它来做出决定。

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

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

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

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

  • 这段代码可能会如何演变？
  • 这两个动作真的是同一个动作还是它们只是相关但独立？
于 2015-10-20T01:10:31.070 回答