6

多くの場合に発生させたいグローバル ビュー (読み込み画面の表示など) がある場合、その動作に対してアクション クリエーター/アクションのペアを作成するか、関連するアクションのリデューサーを作成する方が適切ですか?移行を処理しますか？

これを簡潔に説明するのは難しいので、例をいくつか示します。どちらが優れていますか、なぜですか?

あ

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
    }
}

B

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;
    }
}

状態管理のロジックを複製するよりも、これらの動作を 1 か所で説明する方が賢明だと思われるため、私は A を好みますが、redux コミュニティでは、アクションは必須ではなく、何が起こったか、または起こっているかを説明するべきであるという格言を聞いたことがあります。コマンド。どの場合、「ASYNC_OPERATION_START」のような用語が「SHOW_LOADING」よりも優れているという意味上の問題ですか?

4

1 に答える 1

8

この特定のコードがどのように進化するかを考えてみてください。
これを使用して決定を下します。

たとえば、ロードできるアイテムのセットが複数ある可能性があります。最終的には、項目のリストが 2 つ並んだり、上下に並んだりする場合があります。isLoadingしたがって、ID の個別のリストがあるように、それらに個別の状態を持たせたいと思うでしょう。

両方のオプションでコードはどのように変化しますか? isLoading特定のリストの状態をそれに関する他の情報に近づけることができ、アクション作成者でその状態をリセットするのを忘れる心配がないため、アクションが少ない方が簡単なようです。したがって、この場合、オプション B を選択します。

一方、UI 通知を表示するようなユース ケースについて話している場合は、おそらく別のアクションとして起動します。原因となったサーバーの応答とはかなり独立して存在します。しばらくすると通知を非表示にする必要があり、2 つの通知が同時に画面に表示される可能性があります。したがって、このユース ケースでは、オプション A の方が適しているようです。

一般的に、次のことを自問する必要があります。

  • このコードはどのように進化する可能性がありますか?
  • これら 2 つのアクションは本当に同じものですか、それとも単に関連しているだけで独立しているのでしょうか?
于 2015-10-20T01:10:31.070 に答える