web-dev-qa-db-ja.com

Redux ThunkでgetStateを使用するのは良い習慣ですか？

アクション内でgetStateを使用することが許容されるかどうかに関する他の質問で矛盾する（または単に混乱する）答えを見てきました。アンチパターンと呼ばれることはかなりあります。私にとってはうまくいくようですが、getStateを使用しない場合、これを行うためのベストプラクティスは何ですか？

サンク内でgetStateを使用して、現在一部のモックデータに接続され、アプリケーションの状態になっているユーザーの配列をフィルター処理しています。

これが私のアクションのコードです：

export const accountLogInSuccess = user => ({
    type: types.ACCOUNT_LOG_IN_SUCCESS,
    user,
});

export const accountLogOutSuccess = () => ({
    type: types.ACCOUNT_LOG_OUT_SUCCESS,
});

export const accountCheckSuccess = () => ({
    type: types.ACCOUNT_CHECK_SUCCESS,
});

export const accountCheck = () => (
    (dispatch, getState) => {
        dispatch(ajaxCallBegin());
        return apiAccount.accountCheck().then((account) => {
            if (account) {
                const user = findByUID(getState().users, account.uid);
                dispatch(accountLogInSuccess(user));
                toastr.success(`Welcome ${user.nameFirst}!`);
            } else {
                dispatch(accountLogOutSuccess());
            }
            dispatch(accountCheckSuccess());
        }).catch((error) => {
            dispatch(ajaxCallError(error));
            toastr.error(error.message);
            throw (error);
        });
    }
);

そして私の減速機：

export default function reducerAccount(state = initial.account, action) {
    switch (action.type) {
    case types.ACCOUNT_LOG_IN_SUCCESS:
        return Object.assign({}, state, action.user, {
            authenticated: true,
        });
    case types.ACCOUNT_LOG_OUT_SUCCESS:
        return Object.assign({}, {
            authenticated: false,
        });
    case types.ACCOUNT_CHECK_SUCCESS:
        return Object.assign({}, state, {
            initialized: true,
        });
    default:
        return state;
    }
}

レデューサーで使用されるアカウントの初期状態は次のとおりです。

account: {
    initialized: false,
    authenticated: false,
},

accountCheckアクションは、ユーザー（getStateとfindByUID関数を使用して検出）をaccountLogInSuccessに渡します。ここで、レジューサーはその値をアカウントの現在の状態に追加します。 Object.assign。

ユーザーをアプリケーションのルートに移動してからプロップ経由で渡す必要がないことを優先して、Redux内でこれを達成し、ユーザーデータを状態で利用可能にするベストプラクティスは何ですか？繰り返しますが、サンク内でgetStateを使用することはこれまでのところうまくいきますが、アンチパターンとは見なされないこれに対するより良い解決策はありますか？

reduxredux-thunkgetstate
21
spunge

慣用句Redux：サンク、サガ、抽象化、再利用性に関する考え という拡張ブログ投稿を書きました。その中で、サンクとgetStateの使用に対するいくつかの批判に対応します（ アクション作成者のRedux状態へのアクセス？ のDan Abramovのコメントを含む）。実際、私の投稿はあなたのような質問に特に触発されました。

私の投稿のTL; DRとして：サンクはReduxアプリケーションで使用するための完全に実行可能なツールであり、それらの使用を奨励すると信じています。サンクとサガを使用するとき、およびgetState/selectそれらの内部では、これらの懸念はサンクを使用することからあなたを怖がらせるべきではありません。

26
markerikson