MiniCrudState API Documentation

MiniCrudState extends MiniState to provide specialized support for CRUD (Create, Read, Update, Delete) operations on collections of items. It handles client-side updates to the data array when items are added, updated, or deleted, making it perfect for building data management interfaces.

Overview

Key Feature: MiniCrudState automatically maintains the client-side array of items when CRUD operations are performed. This means the UI will update immediately after add, update, or delete operations, without waiting for a subsequent reload of the data.

Creating a MiniCrudState

Create

static Create<Filter, Item>(triggerFn$: (filter: Filter) => Observable<Item[]>)

Creates a new MiniCrudState instance for a collection of items that can be filtered.

Configuration Methods

setAddState

setAddState<T>(triggerFn$: (input: Item) => Observable<Item | undefined>, successMsgFn?: (input: Item, output: Item | undefined) => string, onTriggerFn?: (input: Item) => void)

Configures the add operation for the CRUD state. When an item is successfully added, it will automatically be appended to the items array in the state.

setUpdateState

setUpdateState<T>(triggerFn$: (input: Item) => Observable<Item | undefined>, successMsgFn?: (input: Item, output: Item | undefined) => string, onTriggerFn?: (input: Item) => void)

Configures the update operation for the CRUD state. When an item is successfully updated, the corresponding item in the array will be replaced with the updated version.

setDeleteState

setDeleteState<DeleteResult>(triggerFn$: (input: Item) => Observable<DeleteResult | undefined>, successMsgFn: (input: Item, output: DeleteResult | undefined) => string, onTriggerFn?: (input: Item) => void)

Configures the delete operation for the CRUD state. When an item is successfully deleted, it will automatically be removed from the items array in the state.

setEqualsFn

setEqualsFn(equals?: (item1?: Item, item2?: Item) => boolean)

Sets the function used to determine if two items are equal. This is used when finding items to update or delete in the collection.

Operation Methods

trigger

(filter: Filter) => MiniState<Filter, Item[]>

Triggers the main operation to load the collection based on the provided filter.

triggerAdd

(item: Item) => MiniState<Item, Item | undefined>

Triggers the add operation with the provided item. When successful, the item will be added to the collection in the state.

triggerUpdate

(item: Item) => MiniState<Item, Item | undefined>

Triggers the update operation with the provided item. When successful, the item will be updated in the collection in the state.

triggerDelete

(item: Item) => MiniState<Item, any>

Triggers the delete operation with the provided item. When successful, the item will be removed from the collection in the state.

How It Works

Get All Items

When you call trigger(filter), MiniCrudState loads the entire collection based on the provided filter and replaces the current data array.

Add Item

When you call triggerAdd(item), MiniCrudState:

Calls the API to create the item
On success, appends the new item to the existing data array
No additional fetch is needed to update the UI

Update Item

When you call triggerUpdate(item), MiniCrudState:

Calls the API to update the item
On success, finds and replaces the matching item in the data array
Uses the equals function to find the matching item

Delete Item

When you call triggerDelete(item), MiniCrudState:

Calls the API to delete the item
On success, removes the matching item from the data array
Uses the equals function to find the item to remove

Complete Usage Example

The following example demonstrates a complete user management component using MiniCrudState:

API Navigation