0

I'm working on the user registration functionality of an application using Typescript and Redux Toolkit. When I make the fetch request to the signup endpoint, a new user is saved to the database I've connected, but I keep entering the catch error block.

export const registerUser = createAsyncThunk(
    "user/registerUser",
    async (form: { username:string, password:string }, thunkAPI) => {
        try {
            const response = await fetch('/api/auth/signup', {
                method: 'POST', 
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                  userInfo: {
                    username: form.username,
                    password: form.password
                  }
                }),
              });
              if (response.status === 200) return 200; 
              else return 400;
        } catch (e) {
            console.log('Error')
        }

    }
    );

I've tried logging the response to the console a number of ways

const data = await response.json() console.log(data)

But have had no luck. I think this is an error with how I've done my fetch request using createAsyncThunk but haven't been able to figure out what I've missed.

This is the code for the initial state and slice:

interface UserState {
    userProfile: {
      id: number | null;
    }, 
    registration: {
      status: 'loaded' | 'loading'
    }
  }

  const initialState : UserState = {
    userProfile: {
      id: null,
    }, 
    registration: {
      status: 'loaded'
    }
  };


export const userSlice = createSlice({
    name: 'user',
    initialState,
      reducers: {
      },
    extraReducers: (builder) => {
      builder.addCase(registerUser.fulfilled, (state) => { state.registration.status = 'loaded' }),
      builder.addCase(registerUser.rejected, (state) => { state.registration.status = 'loaded' }),
      builder.addCase(registerUser.pending, (state) => { state.registration.status = 'loading' })
    }
})

And here is the code for the function where the action is dispatched on the UI

 const handleRegister= async () => { 
    if (!username) return alert('Username field was left empty');
    if (!password) return alert('Password field was left empty');

    const {payload} : any = await dispatch(registerUser({ username: username, password: password})); 
    if (payload === 200) {
        alert('Successfully registered. Redirecting to dashboard');
        return navigate('/dashboard');
      } else { return alert('User creation unsuccessful'); }

}

Appreciate any help as I've looked through many other posts but haven't been able to resolve my issue.

SankariAri
  • 1
  • for this part `catch (e) { console.log('Error') }` could you log the error like `console.log(e, 'API Error')` and document what the error message is? – Parris Sep 20 '22 at 02:51
  • console.log(e, 'API Error') returns just the string 'API Error'. I actually also tried console.log(e.response.data, 'API error') and don't enter the catch block when changed to this. However, am still having trouble logging the response from the fetch request. @Parris – SankariAri Sep 20 '22 at 03:21
  • Consider adding a debugger and using chrome dev tools to debug the code here. I don't think this is a redux issue. I think itd be good to inspect and log every assumption with the fetch. A debugger should help here. Is there anything in the network tab? What's the response status there? – Parris Sep 22 '22 at 03:14

0 Answers0