logger - redux-promise

¿Está utilizando getState en una buena práctica de Redux Thunk?

Question

He visto respuestas conflictivas (o simplemente confusas para mí) en otras preguntas sobre si el uso de getState dentro de una acción es aceptable o no, y he visto bastantes veces que se lo llama antipatrón. Para mí, parece funcionar muy bien, pero ¿cuál es la mejor práctica para hacer esto si no getState usar getState ?

Estoy usando getState dentro de un procesador para filtrar a través de una matriz de usuarios que actualmente está conectada a algunos datos simulados y está siendo arrastrada al estado de la aplicación.

Aquí está el código para mi acción:

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

Y mi reductor:

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

El estado inicial de cuenta utilizado en mi reductor es justo:

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

La acción accountCheck pasa al usuario (encontrado usando getState y la función findByUID ) en accountLogInSuccess donde el reductor agrega sus valores al estado actual de la cuenta a través de Object.assign .

Prefiriendo no tener que ubicar al usuario en la raíz de mi aplicación y luego pasarla a través de accesorios, ¿cuál es la mejor práctica para lograr esto dentro de Redux y tener los datos del usuario disponibles en estado? Una vez más, el uso de getState dentro del procesador funciona muy bien para mí hasta ahora, pero ¿hay una mejor solución para esto que no se considere un antipatrón?

Answer 1

Escribí una publicación de blog ampliada llamada Idiomatic Redux: Pensamientos sobre los zumbidos, las sagas, la abstracción y la reutilización , que aborda este tema en detalle. En él, respondo a varias críticas de thunks y uso de getState (incluyendo los comentarios de Dan Abramov en Accessing Redux state in a action creador? ). De hecho, mi publicación fue inspirada específicamente por preguntas como la tuya.

Como TL; DR de mi publicación: creo que los thunk son una herramienta completamente viable para usar en las aplicaciones de Redux, y fomentar su uso. Si bien hay algunas preocupaciones válidas a tener en cuenta al utilizar thunks y sagas, y el uso de getState/select dentro de ellas, estas preocupaciones no deberían asustarlo de usar thunks.