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

Question

我想弄清楚在Async Redux Thunk Action Creator内部运行Async Action Creator的正确实现方法。以下哪种方法是正确的？

方法1：在Async Redux Thunk Action Creator内运行Async 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);
    }    
}

方法3.saveUserToDevice saveUserToDevice返回动作对象

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返回boolean，dispatch在loginUser内部触发。 saveUserToDevice返回boolean, 派遣在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 遣之