在域之间共享操作

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 => {...}
}

真不知道怎么才能不弄乱这两个模块，成功后dispatch fetchUser register.

我可以 return 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 函数 returns Promise 这就是为什么我们可以将它链接到另一个函数。

和第二个可能的选项：在我们的例子中使用类似 "bridge" 的文件，它是 app-sagas.js

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

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

在域之间共享操作

Share actions between domains

redux

redux-thunk