I am trying to create authentication with redux toolkit but register doesn`t work. Please help me to-CodePudding

I am trying to create authentication with the redux toolkit but the register doesn`t work. User cant register on the website. Thanks for helping me to find out the problem.

below is my code:

userRedux.js -------

import { createSlice } from "@reduxjs/toolkit";
import { toast } from 'react-toastify';

const userSlice = createSlice({
  name: "user",
  initialState: {
    currentUser: null,
    isFetching: false,
    error: false,
  },
  reducers: {
    loginStart: (state) => {
      state.isFetching = true;
    },
    loginSuccess: (state, action) => {
      state.isFetching = false;
      state.currentUser = action.payload;
      toast.success("Logged In Successfully")
    },
    loginFailure: (state) => {
      state.isFetching = false;
      state.error = true;
      toast.error("Invalid username or password")
    },
    RegisterStart: (state) => {
      state.isFetching = true;
    },
    registerSuccess: (state, action) => {
      state.isFetching = false;
      state.currentUser = action.payload;
      toast.success("Sign Up Successfully")
    },
    registerFailure: (state) => {
      state.isFetching = false;
      state.error = true;
      toast.error("Invalid username or password")
    },
    logout: (state) =>{
      state.currentUser = null
    }

  },
});

export const { loginStart, loginSuccess, loginFailure,registerStart, registerSuccess, registerFailure,logout } = userSlice.actions;
export default userSlice.reducer;```

CodePudding user response：

store.js

import cartReducer from "./cartRedux";
import userReducer from "./userRedux";
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";
import storage from "redux-persist/lib/storage";

const persistConfig = {
  key: "root",
  version: 1,
  storage,
};

const rootReducer = combineReducers({ user: userReducer, cart: cartReducer });

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

export const persistor = persistStore(store);```

CodePudding user response：

import {Link} from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux';
import {register} from '../redux/apiCalls'

function Register() {

  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const dispatch = useDispatch();
  const {isFetching} = useSelector((state)=> state.user)

  const handleRegister =(e)=>{
      e.preventDefault()
      register(dispatch, {username,password,email})
  }
  return (
   
<div className="user">
      <div className="form-container">
    <h3>Create An Account</h3>
<form action="" >
    <input placeholder="Enter your username" onChange={(e)=>setUsername(e.target.value)} />
    <input type="email" placeholder="Enter your mail" onChange={(e)=> setEmail(e.target.value)} />
    <input type="password" placeholder="Enter your password" onChange={(e)=> setPassword(e.target.value)} />
    <input type="password" placeholder="Confirm your password"/>
</form>

   
    <button className="btn" onClick={handleRegister} disabled={isFetching} >Create</button>
    <p>Already have am account? <Link to="/login">Login</Link> </p>
    
    
</div> 

    </div>
  
  )
}

export default Register```