How to call action in another action?

Question

I'm building React app : Fleet car manager. So I have a Slice for user which looks like this:

import { createSlice } from '@reduxjs/toolkit'
import { API_URL } from "../API/api";
import axios from 'axios';
import authHeader from "../API/authHeader";


// Slice

//initials here

const slice = createSlice({
    name: 'user',
    initialState: {
        user: initialUser,
        userData : initialUserData,
        token : initialToken,
        adminRole : initialAdminRole,
        managerRole : initialManagerRole,
        userRole : initialUserRole

    },
    reducers: {
        loginSuccess: (state, action) => {
            state.user = action.payload;
            localStorage.setItem('user', JSON.stringify(action.payload))
        },
        getUserData: (state, action) =>  {
            state.userData = action.payload;
            localStorage.setItem('userData', JSON.stringify(action.payload))
        },
        authToken: (state, action) => {
            state.token = action.payload;
        },
        isAdmin: (state, action) => {
            state.adminRole = action.payload;
        },
        isManager: (state, action) => {
            state.managerRole = action.payload;
        },
        isUser: (state, action) => {
            state.userRole = action.payload;
        },
        logoutSuccess: (state) =>  {
            state.user = null;
            state.token = null;
            localStorage.clear()
        },
    },
});

export default slice.reducer


// Actions

const { loginSuccess, logoutSuccess, authToken, isAdmin, isManager, isUser, getUserData } = slice.actions


let token;


export const login = ({ username, password }) => async dispatch => {
    try {
        axios
            .post(API_URL + "login", {username, password})
            .then(response => {
                if(response.status === 200){
                    token = response.headers.authorization;
                    localStorage.setItem('token', token);
                    authHeader();
                    dispatch(authToken({token}))
                    dispatch(loginSuccess({username}));
                    getUsersData();
                }
            })
    } catch (e) {
        return console.error(e.message);
    }


}

export const logout = () => async dispatch => {
    try {
        authHeader();
        return dispatch(logoutSuccess())
    } catch (e) {
        return console.error(e.message);
    }
}

let nickname;
let userID;
let Admin;
let Manager;
let User;

export const getUsersData = () => async dispatch => {
    try {
        axios
            .get(API_URL + 'user')
            .then(res => {
                if(res.data != null){
                   nickname = res.data;
                   console.log(nickname);

                   axios
                       .get(API_URL + 'user/' + nickname)
                       .then(res => {
                           if(res.data != null){
                               userID = res.data.idUsers;
                               if(res.data.role === 'ADMIN'){
                                   Admin = true;
                                   localStorage.setItem('adminRole', Admin);
                                   dispatch(isAdmin({Admin}))
                               }
                               else if(res.data.role === 'MANAGER'){
                                   Manager = true;
                                   localStorage.setItem('managerRole', Manager);
                                   dispatch(isManager({Manager}))
                               }
                               else {
                                   User = true;
                                   localStorage.setItem('userRole', User);
                                   dispatch(isUser({User}))
                               }
                               
                               axios
                                   .get(API_URL + 'user/' + userID + '/usersdata')
                                   .then(res => {
                                       if (res.data != null){
                                           let data = JSON.stringify(res.data)
                                           dispatch(getUserData({data}))
                                           localStorage.setItem('userData', data)
                                       }
                                   })

                           }
                       })

                }
            })
    } catch (e) {
        return console.error(e.message);
    }
}

I'm calling login action in form :

        <Formik
            initialValues={{ username: '', password: '' }}
            onSubmit={(values) => { dispatch(login(values)) }}
        >
          {({ isSubmitting }) => (
              <Form>
                <Field type="text" name="username" />
                <Field type="password" name="password" />
                <button type="submit" disabled={isSubmitting}>Login</button>
              </Form>
          )}
        </Formik>

Login action is working fine, it's dispatching username and token properly. It looks like login action skips call to getUsersData. It doesn't show any errors or anything.
Question is: how and where should i call action getUsersData so it runs code?

Answer 1

You need to use dispatch(getUsersData()) instead of getUsersData() and it should work.