Merge pull request #728 from Arnei/default-typing-for-createAsyncThunk

Default typing for createAsyncThunk

src/createAsyncThunkWithTypes.ts

@@ -0,0 +1,14 @@
+import { createAsyncThunk } from "@reduxjs/toolkit"
+import { AppDispatch, RootState } from "./store"
+
+/**
+ * Use instead of createAsyncThunk to provide basic typing to all async thunks
+ *
+ * Thematically this belongs in `store.ts`. However, this causes
+ * "Cannot access 'createAsyncThunk' before initialization",
+ * so this has to be moved into it's own file.
+ */
+export const createAppAsyncThunk = createAsyncThunk.withTypes<{
+  state: RootState
+  dispatch: AppDispatch
+}>()

src/slices/aclDetailsSlice.ts

@@ -1,7 +1,8 @@
-import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit'
+import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit'
 import axios from 'axios';
 import { prepareAccessPolicyRulesForPost } from '../utils/resourceUtils';
 import { addNotification } from './notificationSlice';
+import { createAppAsyncThunk } from '../createAsyncThunkWithTypes';
 
 /**
  * This file contains redux reducer for actions affecting the state of details of an ACL
@@ -43,7 +44,7 @@ const initialState: AclDetailsState = {
 };
 
 // fetch details about a certain acl from server
-export const fetchAclDetails = createAsyncThunk('aclDetails/fetchAclDetails', async (aclId: number) => {
+export const fetchAclDetails = createAppAsyncThunk('aclDetails/fetchAclDetails', async (aclId: number) => {
 	const res = await axios.get(`/admin-ng/acl/${aclId}`);
 
 	let aclDetails = res.data;
@@ -128,7 +129,7 @@ export const fetchAclDetails = createAsyncThunk('aclDetails/fetchAclDetails', as
 });
 
 // update details of a certain acl
-export const updateAclDetails = createAsyncThunk('aclDetails/updateAclDetails', async (params: {
+export const updateAclDetails = createAppAsyncThunk('aclDetails/updateAclDetails', async (params: {
 	values: {
 		name: string,
 		acls: TransformedAcls,

src/slices/aclSlice.ts

@@ -1,12 +1,12 @@
-import { PayloadAction, SerializedError, createAsyncThunk, createSlice } from '@reduxjs/toolkit'
+import { PayloadAction, SerializedError, createSlice } from '@reduxjs/toolkit'
 import { TableConfig, aclsTableConfig } from "../configs/tableConfigs/aclsTableConfig";
 import axios from 'axios';
 import { getURLParams, prepareAccessPolicyRulesForPost, transformAclTemplatesResponse } from '../utils/resourceUtils';
 import { transformToIdValueArray } from '../utils/utils';
 import { NOTIFICATION_CONTEXT_ACCESS } from '../configs/modalConfig';
 import { addNotification, removeNotificationWizardAccess } from './notificationSlice';
 import { AppDispatch } from '../store';
-import { RootState } from '../store';
+import { createAppAsyncThunk } from '../createAsyncThunkWithTypes';
 
 /**
  * This file contains redux reducer for actions affecting the state of acls
@@ -64,9 +64,9 @@ const initialState: AclsState = {
 	limit: 0,
 };
 
-export const fetchAcls = createAsyncThunk('acls/fetchAcls', async (_, { getState }) => {
+export const fetchAcls = createAppAsyncThunk('acls/fetchAcls', async (_, { getState }) => {
 	const state = getState();
-	let params = getURLParams(state as RootState);
+	let params = getURLParams(state);
 	// Just make the async request here, and return the response.
 	// This will automatically dispatch a `pending` action first,
 	// and then `fulfilled` or `rejected` actions based on the promise.