使用 axios 和 Redux Saga 调用 API 总是返回 undefined

Question

我正在使用axios和redux saga调用api并检查本地输入，但是redux saga总是返回undefined

使用 axios 获取数据的功能

export function requestGetUser() {
  return axios({
    method: 'get',
    url: 'https://my-json-server.typicode.com/khanh21011999/demo/user',
  });
}

动作文件

export const getUser = () => ({
    type: actionList.GET_USER,
});
export const setUser = (user) => ({
    type: actionList.SET_USER,
    user,
});
export const GetUserInfo = (user, password) => {
    return{
        type: actionList.GET_USER_INFO,
        data: {user, password},
    }
};
export const LoginSuccess = (data) => {
    return {
        type: actionList.LOGIN_SUCCESS,
        data,
    };
};

export const LoginFailed = (data) => {
    return {
        type: actionList.LOGIN_FAIL,
        data,
    };
};

export const Logout = (data) => {
    return {
        type: actionList.LOG_OUT,
        data
    };
};

Redux-saga 部分

我记录了所有内容，但它返回 undefined

export function* LoginsSagaFunc() {
    yield takeLatest('GET_USER_INFO', loginSaga)

}
function* SaveToAsyncStorage(data) {
    try {
        AsyncStorage.setItem(
            'data',
            JSON.stringify({
                username: data.username,
                password: data.password
            }))
    } catch (e) {
        console.log('error save to Storage');
    }
}

function* loginSaga(action) {

    console.log('Saga is working')
    const getJson = yield call(requestGetUser)
    const getJsonData = JSON.parse(JSON.stringify(getJson))

    const getJsonUsername = String(getJsonData.username)
    console.log('JsonUsername '+getJsonUsername)
    console.log("local data " + action.data.username)
    console.log('getJsonData '+getJsonData)
    console.log('GetJson '+getJson)
    

    const getJsonPassword = String(getJsonData.password)

    if (String(action.data.username) === getJsonUsername) {
        if (String(action.data.password) === getJsonPassword) {
            console.log('saga login success')
            yield put({type: 'LOGIN_SUCCESS'})
            SaveToAsyncStorage(action.data)
        }
        else {
            console.log('saga password fail')
        }
    }
    else {
        console.log("saga user fail")
    }
}

减速器

const initStateAuth={
        isAuth:false,
        isLogIn:false
    }
    const AuthReducer =(state=initStateAuth,action)=>{
        switch (action.type) {
        case actionList.LOGIN_SUCCESS:
          {
            console.log('action : LOG IN SUCCESS');
            return {
                    
              isAuth: true,
                        isLogIn: true,
            };
          }
            case actionList.GET_USER_INFO:
                {
                    return initStateAuth
                }
        case actionList.LOGIN_FAIL:
          {
           
            return initStateAuth
          }
        case actionList.LOG_OUT:
          {
            return initStateAuth
          }
        default:
          return state;
      }
    
    
    }
    export default AuthReducer

我如何在主文件上分派

 function LoginScreen({navigation}) {
    // set timeout ID for setTimeOut()
    const timeIdRef = React.useRef(null);
    const dispatch = useDispatch();
    const [username, getUsername] = useState('');
    const [password, getPassword] = useState('')

    // handleInput = (e) => {
    //  getUserInfo(e.target.value);
    // };

    // mock user from fake api
    useEffect(() => {
        // dispatch(getUser());
        
    }, [dispatch]);
    dispatch(GetUserInfo(username, password));
    //  const handlegetdata= ({user,password})=>{
    // dispatch(GetUserInfo(user,password))
    // // }

    // console.log(handleGetdata.user)


    const user = useSelector((state) => {
        return state.User.user;
    });
    // console.log('user' + username)
    //  console.log('userJSon'+user.username)
    useEffect(() => {
        return () => {
            if (timeIdRef.current) {
                // make sure this is always cleared in case clearTo is never called
                clearTimeout(timeIdRef.current);
            }
        };
    }, [timeIdRef]);
    // console.log();

    const Login = useSelector((state) => {
        return state.LoginAction.loginStatus;
    });
    // console.log(Login)
    //   const initModal = false;
    // eslint-disable-next-line require-jsdoc
    function handleLogin() {
        dispatch({type: 'changeLogin'});
    }
    function handlDefault() {
        dispatch({type: 'getDefault'});
    }

    // not show??
    // console.log(username);
    // console.log('Login ' + Login)
    //   const [show, doShow] = useState(initModal);

    // const [visible, UpdateView] = useState(false)

    // Show modal dialog
    //   function ChangeModalValue() {
    //     console.log(show);
    //     doShow(!show);
    //   }
    // setTimer after Model Appear

    function SetTimer() {
        handleLogin();
        if (timeIdRef.current) {
            // clear any previous timeIdRef to avoid multiple button click activate multiple setTimeout
            clearTimeout(timeIdRef.current);
        }
        const timeID = setTimeout(() => {
            navigation.navigate('Home');
        }, 3000);
        timeIdRef.current = timeID;
    }

    function clearTO() {
        clearTimeout(timeIdRef.current);
        timeIdRef.current = null;
        handlDefault();
    }

    // make text black when check complete
    function getTextStyle(isValid) {
        if (isValid) {
            return {
                color: 'black',
            };
        }

        return {
            color: 'grey',
        };
    }
    //   function getLoginText() {
    //     return <CirclesLoader />;
    //   }
    // function hideText(visible){
    //     if(isDisabler)

    // }
    const loginValidationSchema = Yup.object().shape({
        email: Yup.string().email('Please enter valid email').required('Email Address is Required'),
        password: Yup.string()
            .min(8, ({min}) => `Password must be at least ${min} characters`)
            .required('Password is required'),
    });
    return (
        <View style={styles.ViewStyle}>
            <Text style={{fontSize: 40}}>Login To System</Text>

            <Formik
                validateOnMount
                validationSchema={loginValidationSchema}
                initialValues={{email: '', password: ''}}
                onSubmit={value => {
                    getUsername(value.email)
                    getPassword(value.password)
                    SetTimer()
                }}
            // () => navigation.navigate('Login')
            >
                {({handleChange, handleBlur, handleSubmit, values, errors, touched, isValid}) => (
                    <View>
                        <TextInput
                            name="email"
                            placeholder="Email Address"
                            style={styles.TextInputForm}
                            onChangeText={handleChange('email')}
                            onBlur={handleBlur('email')}
                            value={values.email}
                            keyboardType="email-address"
                        />
                        {errors.email && touched.email && <Text style={styles.errorText}>{errors.email}</Text>}
                        <TextInput
                            name="password"
                            placeholder="Password"
                            onChangeText={handleChange('password')}
                            onBlur={handleBlur('password')}
                            value={values.password}
                            secureTextEntry
                            style={styles.TextInputForm}
                        />
                        {errors.password && touched.password && (
                            <Text style={styles.errorText}>{errors.password}</Text>
                        )}

                        <TouchableOpacity
                            onPress={handleSubmit}
                            style={styles.ButtonLogin}
                            disabled={!isValid || values.email === ''}>
                            {/* <CirclesLoader size={20} dotRadius={7} /> */}
                            <Text style={getTextStyle(isValid)}>Login</Text>
                        </TouchableOpacity>
                        <View>
                            <Modal transparent visible={Login}>
                                <View
                                    style={{
                                        backgroundColor: '#000000',
                                        flex: 1,
                                        justifyContent: 'center',
                                        alignContent: 'center',
                                    }}>
                                    <View style={styles.ModalStyle}>
                                        <CirclesLoader />
                                        <TextLoader
                                            textStyle={{
                                                fontSize: 25,
                                                marginTop: 20,
                                            }}
                                            text="Logging you in"
                                        />
                                        <TouchableOpacity onPress={clearTO} style={styles.ButtonBack}>
                                            <Text>Go back</Text>
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            </Modal>
                        </View>
                    </View>
                )}
            </Formik>
        </View>
    );
}

另外，当我按下时，动作会获取数据，但它在 redux-saga 部分返回未定义，所以用户名总是如此相等，发生了什么？？

为什么数据显示在 redux 调试器中，但我在 saga 上看不到，为什么我从 axios 获取的数据返回未定义？

一个简短的 gif 来显示发生了什么

请帮忙，万分感谢

完整代码：https://codesandbox.io/s/github/khanh21011999/Trainning-react-native

Answer 1

首先，您的沙盒无法正常工作，因此请确保它适用于所有人。 第二次尝试在您的代码中像这样使用 async/await，我无法测试它，因为您的沙箱正在崩溃。 export async function requestGetUser() { return await axios.get('https://my-json-server.typicode.com/khanh21011999/demo/user'); }

Answer 2

在 axios API 调用中，您需要对成功或失败的响应进行编码，如下所示：

export function requestGetUser() {
  return axios({
    method: 'get',
    url: 'https://my-json-server.typicode.com/khanh21011999/demo/user',
  })
.done (function(data) {
    //Get your data here upon successful fetch
  })
.fail (function() {
    console.log("Failed to fetch data");
  })
.always (function() {
    console.log("This function always executes whether success or fail");
  });
}