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.reducerThe 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
}
)