How to call AsyncThunk method from Reducer method in the same Slice - reactjs

Question

I have a slice using reduxjs/toolkit, state holds a ServiceRequest object and a ServiceRequest array.
What I would like to achieve is; On loading a component I would like to dispatch a call to a reducer which checks, by id, if the ServiceRequest already exists in the array, if so, populate the ServiceRequest with the found object, if not, call an AsyncThunk method in the same slice to retrieve it from a WebAPI.
It is the calling of the AsyncThunk method from within the reducer or reducer method that I can't figure out. Maybe it shouldn't be done this way, but it seems like a nice spot to keep everything together.
How can I achieve this?
This is what I have so far: (you'll see the spots where I think the AsyncThunk method should be called is commented out)
import { createAsyncThunk, createSlice, PayloadAction } from "#reduxjs/toolkit";
import { ServiceRequest } from "./models/ServiceRequest.interface";
import csmRequestDataService from "./services/csmRequestDataService";
interface AsyncState {
isLoading: boolean;
isSuccess: boolean;
isError: boolean;
}
interface CSMState extends AsyncState {
serviceRequest: ServiceRequest | null;
serviceRequests: ServiceRequest[];
}
const initialState: CSMState = {
isLoading: false,
isSuccess: false,
isError: false,
serviceRequest: null,
serviceRequests: [],
}
export const getServiceRequest = createAsyncThunk(
'csm/getServiceRequest',
async (serviceRequestId: number) => {
try {
console.log('getServiceRequest');
return await csmRequestDataService.getServiceRequest(serviceRequestId);
} catch (error) {
console.log('Error: ', error);
}
});
const getOpenedServiceRequests = (
serviceRequests: ServiceRequest[],
serviceRequestId: number
) => {
const serviceRequest = serviceRequests.find(
(tsr) => tsr.ServiceRequestId === serviceRequestId
) || null;
/*
if (serviceRequest == null) {
console.log('GET REQUEST FROM API');
getServiceRequest(serviceRequestId);
} else {
console.log('GOT REQUEST FROM STORE')
}
*/
return serviceRequest;
};
export const csmRequestDataSlice = createSlice({
name: ' csmRequestData',
initialState,
reducers: {
retrieveServiceRequest: (state, action: PayloadAction<number>) => {
const serviceRequest = getOpenedServiceRequests(
state.serviceRequests,
action.payload
);
state.serviceRequest = serviceRequest;
/*
if (serviceRequest == null) {
console.log('GET REQUEST FROM API');
getServiceRequest(action.payload);
} else {
console.log('GOT REQUEST FROM STORE')
}
*/
}
},
extraReducers(builder) {
builder
.addCase(getServiceRequest.pending, (state) => {
state.isLoading = true;
})
.addCase(getServiceRequest.fulfilled, (state, action) => {
if (action.payload && action.payload.serviceRequest !== null) {
state.serviceRequests.push({ ...action.payload.serviceRequest });
state.serviceRequest = action.payload.serviceRequest;
}
state.isLoading = false;
state.isSuccess = true;
console.log('got request data');
})
.addCase(getServiceRequest.rejected, (state) => {
state.isLoading = false;
state.isError = true;
})
},
});
export const { retrieveServiceRequest } = csmRequestDataSlice.actions;
export default csmRequestDataSlice.reducer;
When uncommented the call to getServiceRequest in either spot it doesn't seem to do anything, I was thinking maybe doing a dispatch as I would from a component could possibly work, but unsure how to implement that.
Update:
The following is the service that is called from the slice:
const getServiceRequest = async (serviceRequestId: number) => {
const response = await axiosConfig.get(
'api/csm/getServiceRequest/' + serviceRequestId
);
if (response.data) {
console.log('got service request data in service');
return { serviceRequest: response.data };
}
return { serviceRequest: null };
}
const csmRequestDataService = {
getServiceRequest,
}
export default csmRequestDataService;
Update 2:
I have altered getOpenedServiceRequests:
export const getOpenedServiceRequests = createAsyncThunk(
'csm/getOpenedServiceRequests',
async (
serviceRequestId: number,
{ dispatch, getState }
) => {
const state: any = getState();
const { serviceRequests } = state.csmRequestDataReducer;
let serviceRequest = serviceRequests.find(
(tsr: ServiceRequest) => tsr.ServiceRequestId === serviceRequestId
) || null;
if (!serviceRequest) {
const payloadAction: any = await dispatch(getServiceRequest(serviceRequestId));
serviceRequest = payloadAction.payload.serviceRequest
console.log('***********Retieved SeriveRequest from API');
} else {
console.log('***********Retieved SeriveRequest from array');
}
return { serviceRequest: serviceRequest };
}
);
As you can see I have added async/await and unpacked the getServiceRequest results.
The payloadAction results are as follows:
This works fine other than it feeling a bit messy with the unpacking, also I'll need to add a flag in the extra reducer to say whether the service request gets added to the ServiceRequests array.
What I'm thinking is, not calling dispatch(getServiceRequest(serviceRequestId)) but calling the service directly, then I won't need to unpack/repack the results, I'll also be able to set a flag in each result stating whether the service request should be added to the array

Answer 1

Reducer functions are to be considered pure, synchronous functions. They are synchronous functions of a previous state and an action, and return the next state. What you are looking, or asking, for is another asynchronous action that does the check and conditionally dispatches another asynchronous action.
Convert getOpenedServiceRequests into a Thunk and access the second argument, thunkAPI, to the payload creator function. Use getState to get the full state object, and dispatch to dispatch further actions like getServiceRequest.
import {
createAsyncThunk,
createSlice,
PayloadAction
} from "#reduxjs/toolkit";
import { ServiceRequest } from "./models/ServiceRequest.interface";
import csmRequestDataService from "./services/csmRequestDataService";
...
export const getServiceRequest = createAsyncThunk(
"csmRequestData/getServiceRequest",
async (serviceRequestId: number, { rejectWithValue }) => {
try {
return await csmRequestDataService.getServiceRequest(serviceRequestId);
} catch (error) {
console.warn('Error: ', error);
rejectWithValue(error);
}
},
);
export const getOpenedServiceRequests = createAsyncThunk(
"csmRequestData/getOpenedServiceRequests",
(serviceRequestId: number, { dispatch, getState }) => {
// get the current complete state
const state = getState();
// access into state to get the serviceRequests array
const { serviceRequests } = state.csmRequestData; // <-- * NOTE
const serviceRequest = serviceRequests.find(
(tsr) => tsr.ServiceRequestId === serviceRequestId
);
if (!serviceRequest) {
// No service request, dispatch action to get it
const { payload } = await dispatch(getServiceRequest(serviceRequestId));
return { serviceRequest: payload.serviceRequest };
}
// Fulfill with found service request
return { serviceRequest };
},
);
export const csmRequestDataSlice = createSlice({
name: 'csmRequestData',
initialState,
extraReducers(builder) {
builder
.addCase(getOpenedServiceRequests.pending, (state) => {
state.isLoading = true;
})
.addCase(getOpenedServiceRequests.fulfilled, (state, action) => {
const { serviceRequest } = action.payload;
if (serviceRequest) {
state.serviceRequests.push({ ...serviceRequest });
state.serviceRequest = serviceRequest;
}
state.isLoading = false;
state.isSuccess = true;
})
.addCase(getOpenedServiceRequests.rejected, (state) => {
state.isLoading = false;
state.isError = true;
});
},
});
export default csmRequestDataSlice.reducer;
*NOTE: Here you will need to access into the global state object, following the path created by how you combine your reducers and form the state tree.