How should I do a post request to this url by using Axios (React)

Admin 1
Viewed 98

I have to make a post request to sort of complex url :http://localhost:8080/api/login?email=example%40gmail.com&password=examplepassword according to swagger-ui. The examples at axios's github page says that the second parameter is an object. In my example the second parameter must include email and password properties but after that? I tried many ways to pull this situation of. One of these is below. By the way this error occurs: xhr.js:187 POST http://localhost:8080/api/login?email=asdsadsad&password=[object%20Object]

CustomerSlice:

const customerService = new CustomerService()

export const logCustomerIn = createAsyncThunk(
    'customer/logCustomerIn',
    async (email, password)=>{
        // const response = await customerService.logCustomerIn(email, password)
        
        const response = await axios.post(`http://localhost:8080/api/login?email=${email}&password=${password}`)
        console.log(response)
        return response.data.success
    }
)
export const getCustomers = createAsyncThunk(
    'customer/getCustomers',
    async ()=>{
       const response = await customerService.getAll()
        return response.data.data
    }
)

export const getCustomerByEmail = createAsyncThunk(
    'customer/getCustomerById',
    async(email)=>{
        const response = await customerService.getCustomerByEmail(email)
        console.log(response)
        return response.data.data
    }
)
export const customerSlice = createSlice({
    name:'customer',
    initialState: {
        items:[],
        currentCustomer:{},
        loggedIn:false,

    },
    reducers:{},
    extraReducers:{
        [logCustomerIn.fulfilled]:(state,action)=>{
            state.loggedIn = true
            console.log("logcustomer fulfilled")
        },
        [getCustomers.fulfilled]:(state,action)=>{
            state.items = action.payload
        },
        [getCustomerByEmail.fulfilled]: (state,action)=>{
            state.currentCustomer = action.payload
            console.log(state.currentCustomer)
        }
    }
})

export default customerSlice.reducer

axios reactjs javascript
1 Answers

The problem is that the the callback function you pass to createAsyncThunk is called with a second parameter being an object called "thunkAPI", and not the password you've intended. Please see this doc: https://redux-toolkit.js.org/api/createAsyncThunk.

TL;DR;

If you need to pass in multiple values, pass them together in an object when you dispatch the thunk.

So what you should do is to pass an object like this

{
  email: <user_email>,
  password: <user_password>
}

and change the code that sends the request accordingly:

export const logCustomerIn = createAsyncThunk(
    'customer/logCustomerIn',
    async (credentials)=>{
        const response = await axios.post(`http://localhost:8080/api/login?email=${credentials.email}&password=${credentials.password}`)
        console.log(response)
        return response.data.success
    }
)
user_95086350
Related