I have created a redux async thunk function in my slice file that calls an axios put request from my service file. My backend I am running with mongodb, mongoose, and express.js; The backend works perfectly when I try to update my information on postman. However, when I send the dispatch to call the update function from redux it says I am not authorized because I don't have a token but I am passing the token in the picture
Service JS file:
// Update a practitioner profile
const updatePractitionerProfile = async (practitionerProfileId, token, data) => {
const config = {
headers: {
Authorization: `Bearer ${token}`
}
}
const response = await axios.put(API_URL + practitionerProfileId, data, config)
return response.data
}Slice JS file:
// Update a practitioner profile
export const updatePractitionerProfile = createAsyncThunk(
"practitionerProfiles/update",
async (id, data, thunkAPI) => {
try {
const token = thunkAPI.getState().auth.user.token
return await practitionerProfileService.updatePractitionerProfile(
id, token, data
);
} catch (error) {
const message =
(error.response &&
error.response.data &&
error.response.data.message) ||
error.message ||
error.toString();
return thunkAPI.rejectWithValue(message);
}
}
);const initialState = {
profile: {},
practitionerProfiles:[],
isError: false,
isSuccess: false,
isLoading: false,
message: "",
};
export const practitionerProfileSlice = createSlice({
name: "practitionerProfile",
initialState,
reducers: {
reset: (state) => initialState,
},
extraReducers: (builder) => {
builder
.addCase(updatePractitionerProfile.pending, (state) => {
state.isLoading = true
})
.addCase(updatePractitionerProfile.fulfilled, (state, action) => {
state.isLoading = false
state.isSuccess = true
state.profile = action.payload
})
.addCase(updatePractitionerProfile.rejected, (state, action) => {
state.isLoading = false
state.isError = true
state.message = action.payload
})
}
});