feat(ui): upgrade redux and RTK

There are a few breaking changes, which I've addressed.

The vast majority of changes are related to new handling of `reselect`'s `createSelector` options.

For better or worse, we memoize just about all our selectors using lodash `isEqual` for `resultEqualityCheck`. The upgrade requires we explicitly set the `memoize` option to `lruMemoize` to continue using lodash here.

Doing that required changing our `defaultSelectorOptions`.

Instead of changing that and finding dozens of instances where we weren't using that and instead were defining selector options manually, I've created a pre-configured selector: `createMemoizedSelector`.

This is now used everywhere instead of `createSelector`.
This commit is contained in:
psychedelicious
2023-12-09 00:16:02 +11:00
parent 99f14b1dfe
commit 72cb8b83fe
215 changed files with 1651 additions and 2444 deletions

View File

@ -8,6 +8,8 @@ import {
IMAGE_LIMIT,
} from 'features/gallery/store/types';
import { CoreMetadata, zCoreMetadata } from 'features/nodes/types/metadata';
import { addToast } from 'features/system/store/systemSlice';
import { t } from 'i18next';
import { keyBy } from 'lodash-es';
import { components, paths } from 'services/api/schema';
import {
@ -27,15 +29,13 @@ import {
} from 'services/api/util';
import { ApiTagDescription, LIST_TAG, api } from '..';
import { boardsApi } from './boards';
import { addToast } from 'features/system/store/systemSlice';
import { t } from 'i18next';
export const imagesApi = api.injectEndpoints({
endpoints: (build) => ({
/**
* Image Queries
*/
listImages: build.query<EntityState<ImageDTO>, ListImagesArgs>({
listImages: build.query<EntityState<ImageDTO, string>, ListImagesArgs>({
query: (queryArgs) => ({
// Use the helper to create the URL.
url: getListImagesUrl(queryArgs),
@ -872,7 +872,7 @@ export const imagesApi = api.injectEndpoints({
},
];
const updates: Update<ImageDTO>[] = deleted_board_images.map(
const updates: Update<ImageDTO, string>[] = deleted_board_images.map(
(image_name) => ({
id: image_name,
changes: { board_id: undefined },

View File

@ -17,7 +17,6 @@ import {
VaeModelConfig,
ModelType,
} from 'services/api/types';
import queryString from 'query-string';
import { ApiTagDescription, LIST_TAG, api } from '..';
import { operations, paths } from 'services/api/schema';
@ -186,7 +185,7 @@ const createModelEntities = <T extends AnyModelConfigEntity>(
export const modelsApi = api.injectEndpoints({
endpoints: (build) => ({
getOnnxModels: build.query<
EntityState<OnnxModelConfigEntity>,
EntityState<OnnxModelConfigEntity, string>,
BaseModelType[]
>({
query: (base_models) => {
@ -226,7 +225,7 @@ export const modelsApi = api.injectEndpoints({
},
}),
getMainModels: build.query<
EntityState<MainModelConfigEntity>,
EntityState<MainModelConfigEntity, string>,
BaseModelType[]
>({
query: (base_models) => {
@ -345,7 +344,10 @@ export const modelsApi = api.injectEndpoints({
},
invalidatesTags: ['Model'],
}),
getLoRAModels: build.query<EntityState<LoRAModelConfigEntity>, void>({
getLoRAModels: build.query<
EntityState<LoRAModelConfigEntity, string>,
void
>({
query: () => ({ url: 'models/', params: { model_type: 'lora' } }),
providesTags: (result) => {
const tags: ApiTagDescription[] = [
@ -400,7 +402,7 @@ export const modelsApi = api.injectEndpoints({
invalidatesTags: [{ type: 'LoRAModel', id: LIST_TAG }],
}),
getControlNetModels: build.query<
EntityState<ControlNetModelConfigEntity>,
EntityState<ControlNetModelConfigEntity, string>,
void
>({
query: () => ({ url: 'models/', params: { model_type: 'controlnet' } }),
@ -432,7 +434,7 @@ export const modelsApi = api.injectEndpoints({
},
}),
getIPAdapterModels: build.query<
EntityState<IPAdapterModelConfigEntity>,
EntityState<IPAdapterModelConfigEntity, string>,
void
>({
query: () => ({ url: 'models/', params: { model_type: 'ip_adapter' } }),
@ -464,7 +466,7 @@ export const modelsApi = api.injectEndpoints({
},
}),
getT2IAdapterModels: build.query<
EntityState<T2IAdapterModelConfigEntity>,
EntityState<T2IAdapterModelConfigEntity, string>,
void
>({
query: () => ({ url: 'models/', params: { model_type: 't2i_adapter' } }),
@ -495,7 +497,7 @@ export const modelsApi = api.injectEndpoints({
);
},
}),
getVaeModels: build.query<EntityState<VaeModelConfigEntity>, void>({
getVaeModels: build.query<EntityState<VaeModelConfigEntity, string>, void>({
query: () => ({ url: 'models/', params: { model_type: 'vae' } }),
providesTags: (result) => {
const tags: ApiTagDescription[] = [
@ -525,7 +527,7 @@ export const modelsApi = api.injectEndpoints({
},
}),
getTextualInversionModels: build.query<
EntityState<TextualInversionModelConfigEntity>,
EntityState<TextualInversionModelConfigEntity, string>,
void
>({
query: () => ({ url: 'models/', params: { model_type: 'embedding' } }),

View File

@ -1,5 +1,5 @@
import {
AnyAction,
UnknownAction,
EntityState,
ThunkDispatch,
createEntityAdapter,
@ -33,9 +33,10 @@ export type SessionQueueItemStatus = NonNullable<
>;
export const queueItemsAdapter = createEntityAdapter<
components['schemas']['SessionQueueItemDTO']
components['schemas']['SessionQueueItemDTO'],
string
>({
selectId: (queueItem) => queueItem.item_id,
selectId: (queueItem) => String(queueItem.item_id),
sortComparer: (a, b) => {
// Sort by priority in descending order
if (a.priority > b.priority) {
@ -236,7 +237,7 @@ export const queueApi = api.injectEndpoints({
undefined,
(draft) => {
queueItemsAdapter.updateOne(draft, {
id: item_id,
id: String(item_id),
changes: {
status: data.status,
completed_at: data.completed_at,
@ -281,7 +282,7 @@ export const queueApi = api.injectEndpoints({
invalidatesTags: ['SessionQueueStatus', 'BatchStatus'],
}),
listQueueItems: build.query<
EntityState<components['schemas']['SessionQueueItemDTO']> & {
EntityState<components['schemas']['SessionQueueItemDTO'], string> & {
has_more: boolean;
},
{ cursor?: number; priority?: number } | undefined
@ -331,8 +332,10 @@ export const {
useGetBatchStatusQuery,
} = queueApi;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const resetListQueryData = (dispatch: ThunkDispatch<any, any, AnyAction>) => {
const resetListQueryData = (
// eslint-disable-next-line @typescript-eslint/no-explicit-any
dispatch: ThunkDispatch<any, any, UnknownAction>
) => {
dispatch(
queueApi.util.updateQueryData('listQueueItems', undefined, (draft) => {
// remove all items from the list