如何在 Async Redux Thunk Action Creator 中 运行 一个 Async Action Creator？

Question

我正在尝试找出 运行 Async Action Creator 在 Async Redux Thunk Action Creator 中的正确实现。以下哪项是正确的方法？

方法一：

export const loginUser = () => async(dispatch) => {        
    try {
        user = await LoginManager.logInWithPermissions(['public_profile', 'email']);                              
        dispatch({type: LOGIN, payload: user});
        dispatch({type:SAVE_USER_TO_DEVICE, payload:saveUserToDevice(user)});                              
    } catch (error) {
        console.log(error);
    }
}

export const saveUserToDevice = async(user)=> {        
    try {
        //saveUserToDeviceStatus returns true if successful, otherwise returns an object
        const saveUserToDeviceStatus = await Keychain.setGenericPassword('user', JSON.stringify(user)); 
        return (saveUserToDeviceStatus? true: false);
    } catch (error) {
        console.log(error);
    }    
}

方法 2： saveUserToDevice 调度自身

export const loginUser = () => async(dispatch) => {        
    try {                     
        user = await LoginManager.logInWithPermissions(['public_profile', 'email']);                      
        dispatch({type: LOGIN, payload: user});
        saveUserToDevice(user);
    } catch (error) {
        console.log(error);
    }
}

export const saveUserToDevice = (user) => async(dispatch) => {        
    try {
        //saveUserToDeviceStatus returns true if successful, otherwise returns an object
        const saveUserToDeviceStatus = await Keychain.setGenericPassword('user', JSON.stringify(user)); 
        saveUserToDeviceStatus = saveUserToDeviceStatus? true: false;
        dispatch({type: SAVE_USER_TO_DEVICE, payload: saveUserToDeviceStatus});
    } catch (error) {
        console.log(error);
    }    
}

方法三：saveUserToDevicereturns动作对象

export const loginUser = () => async(dispatch) => {        
    try {                     
        user = await LoginManager.logInWithPermissions(['public_profile', 'email']);                      
        dispatch({type: LOGIN, payload: user});
        const saveUserToDeviceAction = await saveUserToDevice(user);
        dispatch(saveUserToDeviceAction);
    } catch (error) {
        console.log(error);
    }
}

export const saveUserToDevice = async(user) => {        
    try {
        //saveUserToDeviceStatus returns true if successful, otherwise returns an object
        const saveUserToDeviceStatus = await Keychain.setGenericPassword('user', JSON.stringify(user)); 
        saveUserToDeviceStatus = saveUserToDeviceStatus? true: false;
       return {type: SAVE_USER_TO_DEVICE, payload: saveUserToDeviceStatus};
    } catch (error) {
        console.log(error);
    }    
}

方法4： saveUserToDevice returns boolean, dispatch 在loginUser

内部触发

export const loginUser = () => async(dispatch) => {        
    try {                     
        user = await LoginManager.logInWithPermissions(['public_profile', 'email']);                      
        dispatch({type: LOGIN, payload: user});
        const saveUserToDeviceAction = await saveUserToDevice(user);
        dispatch({type: SAVE_USER_TO_DEVICE, payload: saveUserToDeviceAction});
    } catch (error) {
        console.log(error);
    }
}

export const saveUserToDevice = async(user) => {        
    try {
        //saveUserToDeviceStatus returns true if successful, otherwise returns an object
        const saveUserToDeviceStatus = await Keychain.setGenericPassword('user', JSON.stringify(user)); 
        saveUserToDeviceStatus = saveUserToDeviceStatus? true: false;
       return saveUserToDeviceStatus;
    } catch (error) {
        console.log(error);
    }    
}

Answer 1

saveUserToDevice 是一个动作，您需要实际 dispatch 动作，而不仅仅是调用它。

正确的方法是

dispatch(saveUserToDevice(user));

另外 saveUserToDevice 必须将操作发送为

dispatch({type: SAVE_USER_TO_DEVICE, payload: saveUserToDeviceStatus});

完整代码

export const loginUser = () => async(dispatch) => {        
    try {                     
        user = await LoginManager.logInWithPermissions(['public_profile', 'email']);                      
        dispatch({type: LOGIN, payload: user});
        dispatch(saveUserToDevice(user));
    } catch (error) {
        console.log(error);
    }
}

export const saveUserToDevice = (user) => async(dispatch) => {        
    try {
        //saveUserToDeviceStatus returns true if successful, otherwise returns an object
        const saveUserToDeviceStatus = await Keychain.setGenericPassword('user', JSON.stringify(user)); 
        saveUserToDeviceStatus = saveUserToDeviceStatus? true: false;
        dispatch({type: SAVE_USER_TO_DEVICE, payload: saveUserToDeviceStatus});
    } catch (error) {
        console.log(error);
    }    
}

根据您的第一个解决方案，如果您像

这样等待 saveUserToDevice(result)} 是否可行

export const loginUser = () => async(dispatch) => {        
    try {
        user = await LoginManager.logInWithPermissions(['public_profile', 'email']);                              
        dispatch({type: LOGIN, payload: user});
        const data = await saveUserToDevice(result);
        dispatch({type:SAVE_USER_TO_DEVICE, payload: data});                              
    } catch (error) {
        console.log(error);
    }
}

export const saveUserToDevice = async(user)=> {        
    try {
        //saveUserToDeviceStatus returns true if successful, otherwise returns an object
        const saveUserToDeviceStatus = await Keychain.setGenericPassword('user', JSON.stringify(user)); 
        return (saveUserToDeviceStatus? true: false);
    } catch (error) {
        console.log(error);
    }    
}

然而，在这两种方法中，使用使 saveUserToDevice 成为一个动作并调度它的方法更清晰