Поделиться действиями между доменами

Question

Обычно я использую redux-saga, но в настоящее время мне нужен redux-thunk. Я использую уток для модульной структуры, и теперь, например, у меня есть две утки: auth а также user с асинхронными действиями ниже:

Auth-duck.js

register(credentials) {
    return dispatch => {
        dispatch(actions.registerRequest());
        return service.requestRegister(credentials)
            .then((response) => {
                dispatch(actions.registerSuccess(...));

                // Here I need to dispatch some action from user-duck.js
            })
            .catch(() => dispatch(actions.registerError(...)))
    }
}

пользовательский duck.js

fetchUser() {
    return dispatch => {...}
}

Я действительно не знаю, как не связываться с этими двумя модулями и отправлять fetchUser после успешного register,

Я мог бы вернуться register результат (например, токен или что-то еще) для контейнера отсюда он был отправлен, а затем с помощью цепочки отправки fetchUser,

AuthContainer.js

_onSubmit() {
    this.props.register().then(() => this.props.fetchUser);
}

Но я не знаю, является ли это лучшим способом управления такими операциями с помощью redux-thunk?

Answer 1

После долгих поисков я нашел два варианта, как поделиться логикой из разных доменов.Первый заключается в использовании mapDispatchToProps (Спасибо @DonovanM), вот так:

function mapDispatchToProps(dispatch) {
   return {
       login: (credentials) => {
           return dispatch(authActions.login(credentials)).then(
               () => dispatch(userActions.fetchUser())
           );
       }
   }
}

login функция возвращает Promise вот почему мы можем связать это с другим.

И второй возможный вариант: используйте что-то вроде файла "bridge", в нашем случае это app-sagas.js

приложение-duck.js

import {actions as authActions} from './auth-duck.js';
import {actions as userActions} from './user-duck.js';

export function doLogin(credentials) {
    return dispatch => {
        return dispatch(authAction.login(credentials)).then(
            () => dispatch(userActions.fetchUser())
        );
    }
}

Во втором случае мы можем поместить всю логику в утки и избежать распространения логики в контейнерах. Но я думаю, что можно комбинировать оба метода.

Answer 2

Нет никаких правил, которые могут сделать только один HTTP-запрос. Если вам нужно получить пользователя после входа в систему, то получите его.

const login = credentials => dispatch => {
    fetchLogin(credentials).then(() => {
        dispatch({ type: "LoginSuccess" })
        return fetchUser()
    }).then(() => {
        dispatch({ type: "UserFetched" })
    })
}

Если вы хотите повторно использовать действие извлечения пользователя, тогда отправьте thunk из thunk.

const fetchCurrentUser = login => dispatch => {
    return fetchUser(login.userId).then(user => {
        dispatch({ type: "UserLoad" })
        return user
    })
}

const login = credentials => dispatch => {
    return fetchLogin(credentials).then(login => {
        dispatch({ type: "LoginSuccess" })
        return dispatch(fetchCurrentUser(login))
    }
}

В одном из моих приложений после успешного входа в систему я вызываю 7 групповых действий.