store-util.ts

Overview

The store-util.ts file provides utility functions designed to assist with managing and interacting with application state effects, particularly within a namespaced effect-loading context. It includes helper functions for checking the loading status of asynchronous effects and a general-purpose delay function to introduce asynchronous wait periods.

These utilities are typically used in Redux or Redux-Saga-like state management patterns where effects (side effects such as API calls or asynchronous operations) are namespaced and tracked via boolean flags indicating their loading status.

Functions

getOneNamespaceEffectsLoading

export const getOneNamespaceEffectsLoading = (
  namespace: string,
  effects: Record<string, boolean>,
  effectNames: Array<string>,
) => boolean

Description

Checks if any one of the specified effects within a given namespace is currently loading.

This function inspects a dictionary (effects) where keys are namespaced effect identifiers (in the form "namespace/effectName") and values are booleans representing the loading state of each effect. It returns true if at least one of the provided effect names under the given namespace is loading, otherwise false.

Parameters

• namespace: string
  The namespace prefix used to qualify effect names. Typically corresponds to a module or feature in the application state.

• effects: Record<string, boolean>
  An object representing the loading states of effects. Each key is a string in the format "namespace/effectName", and the value is a boolean indicating whether that effect is loading (true) or not (false).

• effectNames: string[]
  An array of effect names (strings) to check within the given namespace.

Returns

• boolean
  Returns true if any one of the specified effects is loading, otherwise false.

Usage Example

const effects = {
  'user/fetchUser': false,
  'user/updateUser': true,
  'auth/login': false,
};

const isUserLoading = getOneNamespaceEffectsLoading('user', effects, ['fetchUser', 'updateUser']);
console.log(isUserLoading); // Output: true (because 'user/updateUser' is true)

delay

export const delay = (ms: number) => Promise<void>

Description

Creates a promise that resolves after a specified number of milliseconds. This function is a simple utility to pause asynchronous code execution for a given duration.

Parameters

• ms: number
  The amount of time in milliseconds to wait before the promise resolves.

Returns

• Promise<void>
  A promise that resolves after the specified delay.

Usage Example

async function fetchData() {
  console.log('Start fetch');
  await delay(1000);  // wait for 1 second
  console.log('Data fetched after 1 second delay');
}

Implementation Details

• getOneNamespaceEffectsLoading uses the array .some() method to efficiently check for any loading state without iterating over the entire list unnecessarily once it finds a loading effect.

• The key lookup in the effects object uses template literals to combine the namespace and effect name as namespace/effectName which follows a conventional pattern for namespacing in state management.

• delay is implemented using setTimeout wrapped in a Promise, providing a clean, reusable asynchronous pause mechanism.

Interaction with Other Parts of the Application

• The getOneNamespaceEffectsLoading function is useful in UI components or middleware to determine if any asynchronous operation under a particular namespace is in progress, which can control loading indicators or prevent duplicate requests.

• The delay function is a generic utility, often used in testing, debouncing, retry logic, or simulating latency.

• This file can be imported by multiple parts of the application that manage or interact with effect loading states, such as Redux middleware, React components, or saga/effect handlers.

Visual Diagram

flowchart TD
    A[getOneNamespaceEffectsLoading] -->|Checks| B[effects: Record<string, boolean>]
    A -->|Uses| C[effectNames: string[]]
    A -->|Filters by| D[namespace: string]
    A -->|Returns| E[boolean]

    F[delay] -->|Takes| G[ms: number]
    F -->|Returns| H[Promise<void>]

Summary

The store-util.ts file provides two concise, reusable utility functions to support state management in applications:

• getOneNamespaceEffectsLoading: Quickly determines if any specified effects are loading within a namespace.

• delay: Introduces asynchronous delays, useful for timing control in async flows.

These functions facilitate cleaner code and better abstraction when dealing with asynchronous state and side effects.