I'm currently working on implementing authentication in my React application using Redux with Redux Toolkit. Here's what I have so far: I've created a sign-in function utilizing createAsyncThunk
export const signin = createAsyncThunk(
'authentication/signin',
async (signinCredentials: userData, { rejectWithValue }) => {
const { email, password } = signinCredentials;
await signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
return user;
})
.catch((error) => {
console.log(error.message);
const errorMessage = error.message;
return rejectWithValue(errorMessage);
});
}
);
I've defined an interface for userState as follows:
export interface userState {
user: object | null;
status: 'idle' | 'loading' | 'failed';
isAuth: boolean;
message: string;
}
Here is the initial state:
const initialState: userState = {
user: null,
status: 'idle',
isAuth: false,
message: '',
};
The issue lies within my auth slice component. Whenever I try to access action.payload, TypeScript throws errors at specific points that I've marked down.
export const authSlice = createSlice({
name: 'authentication',
initialState,
reducers: {},
extraReducers: (builder) => {
builder
.addCase(signin.pending, (state) => {
state.status = 'loading';
state.isAuth = false;
})
.addCase(signin.fulfilled, (state, action) => {
state.status = 'idle';
state.isAuth = true;
state.user = action.payload; // Type void is not assignable to type 'object' | null
})
.addCase(signin.rejected, (state, action) => {
state.status = 'failed';
state.isAuth = false;
state.message = action.payload; // Type 'unknown' is not assignable to type 'string'
})
},
});
I've been troubleshooting these issues for some time now and can't seem to pinpoint the exact problem. I've provided as much detail as possible, but if you require more information, please feel free to reach out. Thank you.