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

第二个可能的选项：在我们的案例中使用类似“桥”文件的内容 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()) ); } }

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

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次动作。

在域之间共享操作

2 个答案: