使用 Axios 对 Api 调用和 React-Redux(action, store and reducer) 进行身份验证流程反应本机登录

Question

我正在尝试将我的反应本机应用程序连接到我的后端（Nodejs），其中 react-redux（存储、操作、流）存在用于登录表单的身份验证流，我在使用 ZD3E28535C74CCEE29182A 实现 API 调用时遇到问题，因为不知道如何一起实现 Axios 和 React-redux

下面是action.js

export const Login = (username, password) => {

    const token = username+password;

    return(
        {
            type: 'LOGIN',
            payload: token,
        }
    )
};

Store.js

import { legacy_createStore, combineReducers } from 'redux';
import Authreducer from './reducer';

const RootReducers = combineReducers(
    {
        Authreducer,
    }
);

export const store = legacy_createStore(RootReducers)

减速器.js

const initialState = {

    authToken: null,
}
export default function reducer( state = initialState, action) {

    switch(action.type){

        case 'LOGIN':
            return {
                ...state, 
                
                authToken: action.payload,
            }

            default: 
            return state
    }
}

登录画面

import React, {useState} from 'react';
import { View, Text, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
import { useDispatch  } from 'react-redux';
import { Login } from '../store/action';


export const AppLogin = () => {
    
    const title = 'Login';    

    const[username, setUsername] = useState('');

    const[password, setPassword] = useState('');

    const dispatch = useDispatch(); 
    
    const submit =() => {     
        
        if(password < 8  )
        {
            alert('Password too short');
        }
        else if(username < 8) {
            alert('Username too short');
        }
       else
        dispatch( Login(username,password))

     }


  return (
    
    <View style={styles.container}>        

        <View>
            <Text style={{ fontWeight: 'bold', fontSize: 24, }}>Welcome to South East Zone,</Text>
            <Text style={{ fontWeight: 'bold', fontSize: 24, }}>Magodo GRA</Text>
        </View>

        <View style={{ marginTop: 18, marginBottom: 50,}}>
            <Text style={{ fontSize: 22,}}>Kindly input your details</Text>
        </View>


        <View>

            <View >

                <Text style={{ marginBottom: 11, fontSize: 18,}}>Username</Text>

                <TextInput placeholder="Username" value={username} onChangeText={(text) => setUsername(text)} style={{  marginBottom: 30, height: 48, padding: 9, backgroundColor: '#ffffff', borderRadius: 10, fontSize: 20,}}/>

                <Text style={{ marginBottom: 11, fontSize: 18,}}>Password</Text>

                <TextInput secureTextEntry={true} placeholder="Password" value={password} onChangeText={(text) => setPassword(text)}  style={{  height: 48, padding: 9, backgroundColor: '#ffffff', borderRadius: 10, fontSize: 20,}}/>          

            </View>   

            <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 11,}}>

                <Text style={{ fontSize: 18,}}>Forget Password? </Text>
                <Text style={{ fontSize: 18, fontStyle: 'italic', color:'#1261A0'}}>Contact Admin</Text>
                
            </View>

          
        </View>    

            <TouchableOpacity style={styles.appButtonContainer} onPress={submit}>
            
                <Text style={styles.appButtonText} >{title}</Text>

            </TouchableOpacity> 

        </View>
  )
}

我如何为 API 调用引入 Axios。