Migrated shortUrlCreation reducer to RTK

src/reducers/index.ts

@@ -3,7 +3,6 @@ import { combineReducers } from 'redux';
 import { serversReducer } from '../servers/reducers/servers';
 import selectedServerReducer from '../servers/reducers/selectedServer';
 import shortUrlsListReducer from '../short-urls/reducers/shortUrlsList';
-import shortUrlCreationReducer from '../short-urls/reducers/shortUrlCreation';
 import shortUrlDeletionReducer from '../short-urls/reducers/shortUrlDeletion';
 import shortUrlEditionReducer from '../short-urls/reducers/shortUrlEdition';
 import shortUrlVisitsReducer from '../visits/reducers/shortUrlVisits';
@@ -25,7 +24,7 @@ export default (container: IContainer) => combineReducers<ShlinkState>({
   servers: serversReducer,
   selectedServer: selectedServerReducer,
   shortUrlsList: shortUrlsListReducer,
-  shortUrlCreationResult: shortUrlCreationReducer,
+  shortUrlCreationResult: container.shortUrlCreationReducer,
   shortUrlDeletion: shortUrlDeletionReducer,
   shortUrlEdition: shortUrlEditionReducer,
   shortUrlVisits: shortUrlVisitsReducer,

src/short-urls/reducers/shortUrlCreation.ts

@@ -1,16 +1,11 @@
-import { Action, Dispatch } from 'redux';
-import { GetState } from '../../container/types';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { ShortUrl, ShortUrlData } from '../data';
-import { buildReducer, buildActionCreator } from '../../utils/helpers/redux';
+import { createAsyncThunk } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import { parseApiError } from '../../api/utils';
-import { ApiErrorAction } from '../../api/types/actions';
 import { ProblemDetailsError } from '../../api/types/errors';
 
-export const CREATE_SHORT_URL_START = 'shlink/createShortUrl/CREATE_SHORT_URL_START';
-export const CREATE_SHORT_URL_ERROR = 'shlink/createShortUrl/CREATE_SHORT_URL_ERROR';
 export const CREATE_SHORT_URL = 'shlink/createShortUrl/CREATE_SHORT_URL';
-export const RESET_CREATE_SHORT_URL = 'shlink/createShortUrl/RESET_CREATE_SHORT_URL';
 
 export interface ShortUrlCreation {
   result: ShortUrl | null;
@@ -19,9 +14,7 @@ export interface ShortUrlCreation {
   errorData?: ProblemDetailsError;
 }
 
-export interface CreateShortUrlAction extends Action<string> {
-  result: ShortUrl;
-}
+export type CreateShortUrlAction = PayloadAction<ShortUrl>;
 
 const initialState: ShortUrlCreation = {
   result: null,
@@ -29,29 +22,33 @@ const initialState: ShortUrlCreation = {
   error: false,
 };
 
-export default buildReducer<ShortUrlCreation, CreateShortUrlAction & ApiErrorAction>({
-  [CREATE_SHORT_URL_START]: (state) => ({ ...state, saving: true, error: false }),
-  [CREATE_SHORT_URL_ERROR]: (state, { errorData }) => ({ ...state, saving: false, error: true, errorData }),
-  [CREATE_SHORT_URL]: (_, { result }) => ({ result, saving: false, error: false }),
-  [RESET_CREATE_SHORT_URL]: () => initialState,
-}, initialState);
+export const shortUrlCreationReducerCreator = (buildShlinkApiClient: ShlinkApiClientBuilder) => {
+  const createShortUrl = createAsyncThunk(CREATE_SHORT_URL, (data: ShortUrlData, { getState }): Promise<ShortUrl> => {
+    const { createShortUrl: shlinkCreateShortUrl } = buildShlinkApiClient(getState);
+    return shlinkCreateShortUrl(data);
+  });
 
-export const createShortUrl = (buildShlinkApiClient: ShlinkApiClientBuilder) => (data: ShortUrlData) => async (
-  dispatch: Dispatch,
-  getState: GetState,
-) => {
-  dispatch({ type: CREATE_SHORT_URL_START });
-  const { createShortUrl: shlinkCreateShortUrl } = buildShlinkApiClient(getState);
+  const { reducer, actions } = createSlice({
+    name: 'shortUrlCreationReducer',
+    initialState,
+    reducers: {
+      resetCreateShortUrl: () => initialState,
+    },
+    extraReducers: (builder) => {
+      builder.addCase(createShortUrl.pending, (state) => ({ ...state, saving: true, error: false }));
+      builder.addCase(
+        createShortUrl.rejected,
+        (state, { error }) => ({ ...state, saving: false, error: true, errorData: parseApiError(error) }),
+      );
+      builder.addCase(createShortUrl.fulfilled, (_, { payload: result }) => ({ result, saving: false, error: false }));
+    },
+  });
 
-  try {
-    const result = await shlinkCreateShortUrl(data);
+  const { resetCreateShortUrl } = actions;
 
-    dispatch<CreateShortUrlAction>({ type: CREATE_SHORT_URL, result });
-  } catch (e: any) {
-    dispatch<ApiErrorAction>({ type: CREATE_SHORT_URL_ERROR, errorData: parseApiError(e) });
-
-    throw e;
-  }
+  return {
+    reducer,
+    createShortUrl,
+    resetCreateShortUrl,
+  };
 };
-
-export const resetCreateShortUrl = buildActionCreator(RESET_CREATE_SHORT_URL);

src/short-urls/reducers/shortUrlsList.ts

@@ -74,13 +74,13 @@ export default buildReducer<ShortUrlsList, ListShortUrlsCombinedAction>({
     ),
     state,
   ),
-  [CREATE_SHORT_URL]: pipe(
+  [`${CREATE_SHORT_URL}/fulfilled`]: pipe( // TODO Do not hardcode action type here
     // The only place where the list and the creation form coexist is the overview page.
     // There we can assume we are displaying page 1, and therefore, we can safely prepend the new short URL.
     // We can also remove the items above the amount that is displayed there.
-    (state: ShortUrlsList, { result }: CreateShortUrlAction) => (!state.shortUrls ? state : assocPath(
+    (state: ShortUrlsList, { payload }: CreateShortUrlAction) => (!state.shortUrls ? state : assocPath(
       ['shortUrls', 'data'],
-      [result, ...state.shortUrls.data.slice(0, ITEMS_IN_OVERVIEW_PAGE - 1)],
+      [payload, ...state.shortUrls.data.slice(0, ITEMS_IN_OVERVIEW_PAGE - 1)],
       state,
     )),
     (state: ShortUrlsList) => (!state.shortUrls ? state : assocPath(

src/short-urls/services/provideServices.ts

@@ -1,4 +1,5 @@
 import Bottle from 'bottlejs';
+import { prop } from 'ramda';
 import { ShortUrlsFilteringBar } from '../ShortUrlsFilteringBar';
 import { ShortUrlsList } from '../ShortUrlsList';
 import { ShortUrlsRow } from '../helpers/ShortUrlsRow';
@@ -7,7 +8,7 @@ import { CreateShortUrl } from '../CreateShortUrl';
 import { DeleteShortUrlModal } from '../helpers/DeleteShortUrlModal';
 import { CreateShortUrlResult } from '../helpers/CreateShortUrlResult';
 import { listShortUrls } from '../reducers/shortUrlsList';
-import { createShortUrl, resetCreateShortUrl } from '../reducers/shortUrlCreation';
+import { shortUrlCreationReducerCreator } from '../reducers/shortUrlCreation';
 import { deleteShortUrl, resetDeleteShortUrl } from '../reducers/shortUrlDeletion';
 import { editShortUrl } from '../reducers/shortUrlEdition';
 import { ConnectDecorator } from '../../container/types';
@@ -55,11 +56,15 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('ExportShortUrlsBtn', ExportShortUrlsBtn, 'buildShlinkApiClient', 'ReportExporter');
   bottle.decorator('ExportShortUrlsBtn', connect(['selectedServer']));
 
+  // Reducers
+  bottle.serviceFactory('shortUrlCreationReducerCreator', shortUrlCreationReducerCreator, 'buildShlinkApiClient');
+  bottle.serviceFactory('shortUrlCreationReducer', prop('reducer'), 'shortUrlCreationReducerCreator');
+
   // Actions
   bottle.serviceFactory('listShortUrls', listShortUrls, 'buildShlinkApiClient');
 
-  bottle.serviceFactory('createShortUrl', createShortUrl, 'buildShlinkApiClient');
-  bottle.serviceFactory('resetCreateShortUrl', () => resetCreateShortUrl);
+  bottle.serviceFactory('createShortUrl', prop('createShortUrl'), 'shortUrlCreationReducerCreator');
+  bottle.serviceFactory('resetCreateShortUrl', prop('resetCreateShortUrl'), 'shortUrlCreationReducerCreator');
 
   bottle.serviceFactory('deleteShortUrl', deleteShortUrl, 'buildShlinkApiClient');
   bottle.serviceFactory('resetDeleteShortUrl', () => resetDeleteShortUrl);

src/tags/reducers/tagsList.ts

@@ -103,9 +103,9 @@ export default buildReducer<TagsList, TagsCombinedAction>({
     ...state,
     stats: increaseVisitsForTags(calculateVisitsPerTag(payload.createdVisits), state.stats),
   }),
-  [CREATE_SHORT_URL]: ({ tags: stateTags, ...rest }, { result }) => ({
+  [`${CREATE_SHORT_URL}/fulfilled`]: ({ tags: stateTags, ...rest }, { payload }) => ({ // TODO Do not hardcode action type here
     ...rest,
-    tags: stateTags.concat(result.tags.filter((tag) => !stateTags.includes(tag))), // More performant than [ ...new Set(...) ]
+    tags: stateTags.concat(payload.tags.filter((tag) => !stateTags.includes(tag))), // More performant than [ ...new Set(...) ]
   }),
 }, initialState);