Modern React Redux Toolkit - Login & User Registration Tutorial and Example

[utterances-bot]

Modern React Redux Toolkit - Login & User Registration Tutorial and Example

User Authentication is one of the common workflow in web applications. In this tutorial, we will see how to build a User Login and Signup workflow with Modern react redux toolkit.

https://cloudnweb.dev/2021/02/modern-react-redux-tutotials-redux-toolkit-login-user-registration/

[dewaleolaoye]

Hi, nice article. can you share the GitHub url or I will like to see the Private Route component. Thanks

[dewaleolaoye]

Oooh, I can't edit/delete comment. On my end, I'm using localStorage to check if there's a token or not. I want to know if there's a better way to handle this?

[alwaysEnergetic]

Good ! I want you upload it to github!

[kumold]

Isn't using RTK Query modern way not async thunk?

[waleedghani]

I received this error after run the code export 'clearState' (imported as 'clearState') was not found in '../../store/userSlice' (possible exports: signupUser, userSelector, userSlice)

[waleedghani]

this is my userSlice

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; export const userSlice = createSlice({ name: "user", initialState: { f_name: "", l_name: "", email: "", password: "", confirm_password: "", phone: "", isFetching: false, isSuccess: false, isError: false, errorMessage: "", }, reducers: {

}, extraReducers: { [signupUser.fulfilled]: (state, { payload }) => { state.isFetching = false; state.isSuccess = true; state.f_name = payload.user.f_name; state.l_name = payload.user.l_name; state.email = payload.user.email; state.password = payload.user.password; state.confirm_password = payload.user.confirm_password; state.phone = payload.user.phone; }, [signupUser.pending]: (state) => { state.isFetching = true; }, [signupUser.rejected]: (state, { payload }) => { state.isFetching = false; state.isError = true; state.errorMessage = payload.message; }, }, }); export const userSelector = (state) => state.user;

export const signupUser = createAsyncThunk( "users/signupUser", async ( { f_name, l_name, email, password, confirm_password, phone }, thunkAPI ) => { try { const response = await fetch( "https://mock-user-auth-server.herokuapp.com/api/v1/users", { method: "POST", headers: { Accept: "application/json", "Content-Type": "application/json", }, body: JSON.stringify({ email, password, }), } ); let data = await response.json(); console.log("data", response); if (response.status === 200) { localStorage.setItem("token", data?.response?.token); return { ...data, f_name: f_name, l_name: l_name, email: email, password: password, confirm_password: confirm_password, phone: phone, }; } else { return thunkAPI.rejectWithValue(data); } } catch (e) { console.log("Error", e.response.data); return thunkAPI.rejectWithValue(e.response.data); } } );