userSlice.js:22 Uncaught (in promise) TypeError: Cannot create property 'error' on string 'User created successfully!' at signInFailure (userSlice.js:22:19) at @reduxjs_toolkit.js?v=69e8a274:1773:26

[Non00010110000]

#reducers for make requests to api in mern app

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
currentUser: null,
error: null,
loading: false,
};

const userSlice = createSlice({
name: "user",
initialState,
reducers: {
signInStart: (state) => {
state.loading = true;
},
signInSuccess: (state, action) => {
state.currentUser = action.payload;
state.loading = false;
state.error = null;
},
signInFailure: (state, action) => {
state.error = action.payload; // Handle both object and string payloads
state.loading = false;
},
 
});

export const {
signInStart,
signInSuccess,
signInFailure,

signOutUserStart,
} = userSlice.actions;

export default userSlice.reducer;

i try make the payload is string but it not solve the broblem !

signInFailure: (state, action) => {

state.error = typeof action.payload === 'string' ? action.payload : 'An error occurred';
state.loading = false;

those the backend api handling for signup and signing :

export const signup = async (req, res, next) => {
  const { username, email, password } = req.body;
  const hashedPassword = bcryptjs.hashSync(password, 10);
  const newUser = new User({ username, email, password: hashedPassword });
  try {
    await newUser.save();
    res.status(201).json({ success: true, data: 'User created successfully!' });
  } catch (error) {
    next(error);
  }
};


export const signin = async (req, res, next) => {
  const { email, password } = req.body;
  try {
    const validUser = await User.findOne({ email });
    if (!validUser) return next(errorHandler(404, 'User not found!'));
    const validPassword = bcryptjs.compareSync(password, validUser.password);
    if (!validPassword) return next(errorHandler(401, 'Wrong credentials!'));
    const token = jwt.sign({ id: validUser._id }, process.env.JWT_SECRET);
    const { password: pass, ...rest } = validUser._doc;
    res
      .cookie('access_token', token, { httpOnly: true })
      .status(200)
      .json(rest);
  } catch (error) {
    next(error);
  }
};  

and this function that handle the signin request based on the actions from the userSlice :

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      dispatch(signInStart());
      const res = await fetch('/api/auth/signin', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });
      const data = await res.json();
      console.log(data);
      if (data.success === false) {  
        console.log('Error data:', data);  
        dispatch(signInFailure(data.message));  
        return;  
      }  
      dispatch(signInSuccess(data));
      navigate('/');
    } catch (error) {
      dispatch(signInFailure(error.message));
    }}