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));
    }}

[Sumit-Mayani]

The error Cannot create property 'error' on string 'User created successfully!' means your Redux state has become a string instead of staying as the initial object { currentUser, error, loading }.

This happens when a reducer replaces the entire state with the API response (a string) instead of updating individual properties. Most likely your signInSuccess reducer is doing this:

// ❌ Wrong — reassigning the state parameter replaces the state with a string
signInSuccess: (state, action) => {
  state = action.payload; // action.payload is "User created successfully!"
},

In Redux Toolkit (which uses Immer), you must either mutate the draft state properties directly, or return a new state value. Reassigning the state parameter itself has no effect in Immer and leaves state corrupted.

Fix:

// ✅ Correct — mutate the draft state properties
signInSuccess: (state, action) => {
  state.currentUser = action.payload; // action.payload should be the user object
  state.loading = false;
  state.error = null;
},
signInFailure: (state, action) => {
  state.error = action.payload; // action.payload should be an error message string
  state.loading = false;
},

Also make sure your async call dispatches the user object to signInSuccess, not the success message string:

const data = await res.json();
dispatch(signInSuccess(data.user)); // pass the user object, not data.message

If the API returns { user: {...}, message: "User created successfully!" }, dispatch data.user to signInSuccess and data.message or an error string to signInFailure.

[Sumit-Mayani]

The error Cannot create property 'error' on string 'User created successfully!' means the entire Redux state slice has been replaced by a string instead of staying as the initial object { currentUser, error, loading }.

In Redux Toolkit (Immer), if a case reducer returns a value, Immer replaces the entire state with that returned value. This is different from mutating the draft.

// ❌ This causes the bug — returning replaces entire state
signInSuccess: (state, action) => {
  return action.payload; // if payload is a string, whole state becomes that string
}

// ✅ Correct — mutate draft properties directly
signInSuccess: (state, action) => {
  state.currentUser = action.payload;
  state.loading = false;
  state.error = null;
}

Note: state = action.payload inside a reducer has no effect in Immer — it does not replace state. Only an explicit return action.payload replaces the entire state.

The specific string 'User created successfully!' in the error points to a second issue: your signup API returns { success: true, data: 'User created successfully!' }. If anywhere in your signup handler you dispatch signInSuccess(data.data), that string becomes the payload — and if your reducer returns it instead of mutating, the whole state is replaced by that string.

Fix both:

1. Never return action.payload in a case reducer — mutate state.* directly
2. Your signup handler should NOT dispatch signInSuccess at all — signup ≠ signin. After successful signup, redirect to login. Only dispatch signInSuccess after a valid signin response that returns the user object.