I am learning reduxtk and am trying to write an async thunk using createAsyncThunk middleware which will work with firebase auth methods - for example I began with singInWithEmailAndPassword.
I know that I can use a regular reducer, let's say in an onAuthStateChanged observer and in this way handle it synchronously. I however want to try to create an async thunk.
Within authSlice.js:
export const loginUser = createAsyncThunk(
"auth/login",
async (email, password) => {
console.log(email, password);
const auth = getAuth();
const user = await signInWithEmailAndPassword(auth, email, password);
return user;
}
);
Within my extraReducers in authSlice.js:
builder.addCase(loginUser.fulfilled, (state, action) => {
// const {email}
// state.userEmail = action.payload.email;
console.log(action.payload);
});
builder.addCase(loginUser.rejected, (state) => {
state.message = "There was an error";
});
State gets updated with 'There was an error' so I think things are hooked up properly.
Initially the auth was received as an argument within the anonymous async function in the loginUser thunk but I am still getting errors whatever I do. I am sure I am not doing something as per 'best practices'. I am getting a POST 400 error. Can someone assist?
