Redux 在域之间共享操作

通常我使用redux saga，但目前我需要redux thunk。我在模块化结构中使用ducks，例如，现在我有两个ducks:

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(...)))
    }
}

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

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

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

用户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(...)))
    }
}

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

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

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

我真的不知道怎样才能不把这两个模块搞得一团糟，在成功注册后分派

fetchUser

我可以将

register

结果（例如令牌或其他东西）返回到容器中，然后使用链接调度

fetchUser

AuthContainer.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(...)))
    }
}

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

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

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

---

但我不知道这是用redux thunk管理此类业务的最佳方式吗

经过长时间的搜索，我找到了两种方法来共享来自不同域的逻辑。 第一个是使用

mapDispatchToProps

（谢谢@DonovanM），如下所示：

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

login

函数返回

Promise

这就是为什么我们可以将它链接到另一个函数

和第二个可能选项： 在我们的例子中使用类似于“桥”的文件，它是app sagas.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(...)))
    }
}

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

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

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

应用程序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(...)))
    }
}

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

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

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

---

在第二种情况下，我们可以将所有逻辑放在ducks中，避免在容器中传播逻辑。但是我想这两种方法可以结合使用。

没有规则thunks只能发出一个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个action thunks

只要提交的

\u onSubmit

在将来不会变得更复杂，这似乎没问题。不过，我个人可能会将这种逻辑放在

mapDispatchToProps

中。这样，您的组件就不必知道任何有关操作的信息。@DonovanM是的，您是对的，

mapDispatchToProps

比组件中的方法更好谢谢@AJcodez的回答。鸭子的想法是拥有独立的模块，以提供松散耦合。所以，登录鸭不能知道任何关于用户鸭。