callback function after dispatch function in react-redux

Question

I am trying to implement a simple login form, that gets username and password as input.

User.js

    import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import {
  set,
  reject,
  verify,
  isLoggedIn,
} from './userSlice';

export function User() {
  const isUserLoggedIn = useSelector(isLoggedIn);
  const dispatch = useDispatch();
  const [loginError, setLoginError] = useState(false);
  
  return (
    
    <div>
      
      <div> {loginError? 'Invalid credentials': ''}</div>
        {/* Form elements here */}
        <button 
          onClick={() => dispatch(verify())}
        >
          Verify User
        </button>
      </div>
  );
}

userSlice.js

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

export const userSlice = createSlice({
  name: 'user',
  initialState: {
    loggedIn: false,
    email: '',
    name: '',
    token:''
  },
  reducers: {
    set: (state, action) => {
        return Object.assign({}, state, action.payload);
    },
    reject: (state, action) =>{
        state.value = action.payload
    }
  },
});

export const { set, reject } = userSlice.actions;

export const verify = user => dispatch => { // For making an api call to verify the credentials are correct
  axios.post('login', data).then(function(){
      dispatch(set({loggedIn:true}))
  }).catch(function(){
    dispatch(reject({loggedIn:false}))
  });
};

export const isLoggedIn = state => state.user.loggedIn;

export default userSlice.reducer;

All codes are working fine.

Now if the api call fails, i need to update the state loginError to true. How it can be done from userSlice.js file to User.js file.

Answer 1

Something like that I guess

User.js

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import {
  set,
  reject,
  verify,
  isLoggedIn,
  isLoginError,  //<-------------
} from './userSlice';

export function User() {
  const isUserLoggedIn = useSelector(isLoggedIn);
  const dispatch = useDispatch();
  const isLoginError = useSelector(isLoginError); //<----------------
  
  return (
    
    <div>
      
      <div> {isLoginError ? 'Invalid credentials': ''}</div>  //<-------------
        {/* Form elements here */}
        <button 
          onClick={() => dispatch(verify())}
        >
          Verify User
        </button>
      </div>
  );
}

userSlice.js

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

export const userSlice = createSlice({
  name: 'user',
  initialState: {
    loggedIn: false,
    email: '',
    name: '',
    token:''
  },
  reducers: {
    set: (state, action) => {
        return Object.assign({}, {...state, loginError:false}, action.payload); //<------
    },
    reject: (state, action) =>{
        return Object.assign({}, {...state, loginError:true}, action.payload); //<-------
    }
  },
});

export const { set, reject } = userSlice.actions;

export const verify = user => dispatch => { // For making an api call to verify the credentials are correct
  axios.post('login', data).then(function(){
      dispatch(set({loggedIn:true}))
  }).catch(function(){
    dispatch(reject({loggedIn:false}))
  });
};

export const isLoggedIn = state => state.user.loggedIn;
export const isLoginError = state => state.user.loginError; //<----------

export default userSlice.reducer;