Using async code in a reducer

[erictompkins]

Is it possible to have asynchronous code within a Zedux reducer?

We are currently using a custom hook (https://www.npmjs.com/package/@bitovi/use-simple-reducer) to do this but wanted to know if this is something that can be done with Zedux.

In some actions, we are awaiting another hook that returns a promise.

Below is how we are currently doing it (note - not all the code is included here, but hopefully enough to get the idea)

/**
     * The simple reducer is a way to have an asynchronous reducer. 
     * https://www.npmjs.com/package/@bitovi/use-simple-reducer
     */
    const [placedBlocks, actions, queue, error] = useSimpleReducer(initialState, {
        /**
         * Add a new blank item either at the specified index or at the bottom of the list of items.
         *
         * @param {PlacedBlock[]} stateItems The current placed blocks in the state
         * @param {Block} blockData The block data for the new item
         * @param {number|undefined} index The index to insert the item at
         * @returns {Promise<PlacedBlock[]>}
         */
        async add(
            stateItems: PlacedBlock[],
            blockData: Block,
            index: number | undefined = undefined,
        ): Promise<PlacedBlock[]> {
            const newState = stateItems;
            const newBlock = getNewPlacedBlock(blockData);
            if (isDefined(index)) {
                newState.splice(index, 0, newBlock); // Insert at index
            } else {
                newState.push(newBlock);
            }
            // Set the new block as active
            setActiveBlockUuid(newBlock.uuid);
            return newState;
        },

        /**
         * Collapse a single item
         *
         * @param {PlacedBlock[]} stateItems The current placed blocks in the state
         * @param {number} index The index of the placed block to collapse
         * @returns {Promise<PlacedBlock[]>}
         */
        async collapse(stateItems: PlacedBlock[], index: number): Promise<PlacedBlock[]> {
            const newState = stateItems;
            newState[index].minimized = true;
            newState[index].values = {}; // Set values to be empty so as to not pass incorrect values to the field components
            return newState;
        },

        /**
         * Collapse all of the items
         *
         * @param {PlacedBlock[]} stateItems The current placed blocks in the state
         * @returns {Promise<PlacedBlock[]>}
         */
        async collapseAll(stateItems: PlacedBlock[]): Promise<PlacedBlock[]> {
            const newState = stateItems;
            newState.forEach((_, index) => {
                newState[index].minimized = true;
                newState[index].values = {}; // Set values to be empty so as to not pass incorrect values to the field components
            });
            return newState;
        },

        /**
         * Copies an item
         *
         * @param {PlacedBlock[]} stateItems The current placed blocks in the state
         * @param {number} index The position of the item being copied
         * @param {string} itemId The item id
         * @returns {Promise<PlacedBlock[]>}
         */
        async copy(stateItems: PlacedBlock[], index: number, itemId: string): Promise<PlacedBlock[]> {
            const newState = emptyValues(stateItems);

            // Get the current item from the reducer state because some if its
            // values need to be set on the new item.
            const itemState = newState[index];

            // Get the data for the item from state
            const item = await blockDataHelper.getPlacedBlockData(itemId, true);

            // New index is the one after the item to be copied
            const newIndex = index + 1;

            // Set up the data for the new item
            // Clone the item and set a new id.
            // Copy over some state values from the item being copied.
            const newItem: PlacedBlockData = cloneDeep(item);
            newItem.uuid = uuidv4();
            if (itemState.minimized) {
                newItem.minimized = itemState.minimized;
            }
            // Need to include the children so that sub block canvases
            // get set up correctly.
            if (isObject(itemState.values)) {
                const itemStateValues = itemState.values;
                const newValues: PlacedBlockValues = {};
                Object.keys(itemStateValues).forEach((key) => {
                    const newChild = cloneDeep(itemStateValues[key]) as PlacedBlock;
                    newChild.uuid = uuidv4();
                    newValues[key] = newChild;
                });
                newItem.values = newValues;
            }

            // Copy over blockmetadata
            newItem.blockData = cloneDeep(itemState.blockData);

            // Update subCanvasKeys
            if (isObject(itemState.subBlockCanvas)) {
                Object.keys(itemState.subBlockCanvas).forEach((key) => {
                    newItem.subBlockCanvas[key] = newItem.subBlockCanvas[key].map(() => uuidv4());
                });
            }

            // Insert the new item at new index
            newState.splice(newIndex, 0, newItem as PlacedBlock);

            setActiveBlockUuid(newItem.uuid);

            // Return the updated state
            return newState;
        },

        /**
         * Marks an item as deleted
         *
         * @param {PlacedBlock[]} stateItems The current placed blocks in the state
         * @param {number} index The position of the item being deleted
         * @param {string} itemId The item id
         * @returns {Promise<PlacedBlock[]>}
         */
        async delete(stateItems: PlacedBlock[], index: number, itemId: string): Promise<PlacedBlock[]> {
            const newState = stateItems;

            // Get the data for the item from state
            const item = await blockDataHelper.getPlacedBlockData(itemId, true);

            // Set up the values to include the values of the item being deleted.
            // This is necessary so that when the item is restored the item values are there.
            if (objectHasValue(item, 'values')) {
                newState[index].values = cloneDeep(item.values);
            }
            // Set the subBlockCanvasData if it exists. This is necessary so that when the item
            // is restored the sub items get restored with the correct values.
            if (objectHasValue(item, 'subBlockCanvas')) {
                newState[index].subBlockCanvas = item.subBlockCanvas;
            }

            newState[index].isDeleted = true;

            setActiveBlockUuid('');
            return newState;
        },

        /**
         * Fully deletes an item. This is done after an item is marked as deleted and the user clicks on the delete links
         *
         * @param {PlacedBlock[]} stateItems The current placed blocks in the state
         * @param {number} index The position of the item being deleted
         * @returns {Promise<PlacedBlock[]>}
         */
        async deleteCompletely(stateItems: PlacedBlock[], index: number): Promise<PlacedBlock[]> {
            const newState = stateItems;
            newState.splice(index, 1);
            return newState;
        },

        /**
         * Expand a single item
         *
         * @param {PlacedBlock[]} stateItems The current placed blocks in the state
         * @param {number} index The index of the placed block to expand
         * @returns {Promise<PlacedBlock[]>}
         */
        async expand(stateItems: PlacedBlock[], index: number): Promise<PlacedBlock[]> {
            const newState = stateItems;
            newState[index].minimized = false;
            newState[index].values = {}; // Set values to be empty so as to not pass incorrect values to the field components
            return newState;
        },

        /**
         * Expand all of the items
         *
         * @param {PlacedBlock[]} stateItems The current placed blocks in the state
         * @returns {Promise<PlacedBlock[]>}
         */
        async expandAll(stateItems: PlacedBlock[]): Promise<PlacedBlock[]> {
            const newState = stateItems;
            newState.forEach((_, index) => {
                newState[index].minimized = false;
                newState[index].values = {}; // Set values to be empty so as to not pass incorrect values to the field components
            });
            return newState;
        },

        /**
         * Insert existing placed block into canvas
         *
         * @param {PlacedBlock[]} stateItems The current placed blocks in the state
         * @param {PlacedBlock} insertBlock The block to insert
         * @param {number} index The index to insert the block at. If not set then the block is added to the end of the list.
         * @returns {Promise<PlacedBlock[]>}
         */
        async insert(stateItems: PlacedBlock[], insertBlock: PlacedBlock, index?: number): Promise<PlacedBlock[]> {
            const newState = stateItems;

            // Get all the placed block data for the block being inserted
            const block = await blockDataHelper.getPlacedBlockData(insertBlock.uuid, false);
            const newBlock = cloneDeep(block);

            if (isDefined(index)) {
                newState.splice(index, 0, newBlock as PlacedBlock); // Insert at index
            } else {
                newState.push(newBlock as PlacedBlock);
            }
            return newState;
        },

        /**
         * Move an item to a new position
         *
         * @param {PlacedBlock[]} stateItems The current placed blocks in the state
         * @param {number} index The index of the placed block to move
         * @param {number} indexTo The index to move the block to
         * @returns {Promise<PlacedBlock[]>}
         */
        async move(stateItems: PlacedBlock[], index: number, indexTo: number): Promise<PlacedBlock[]> {
            // When an item is moved down it's removed from its position and then moved. That means that
            // the position its being moved to needs to be decreased by 1.
            // We tried to move the item first and then remove it in moveItem(), but that caused other problems.
            // The item being moved must be removed first and then inserted into the new location.
            let newIndex = indexTo;
            if (index < newIndex) {
                newIndex -= 1;
            }
            return moveBlock(stateItems, index, newIndex);
        },

        /**
         * Move an item down
         *
         * @param {PlacedBlock[]} stateItems The current placed blocks in the state
         * @param {number} index The index of the placed block to move
         * @returns {Promise<PlacedBlock[]>}
         */
        async moveDown(stateItems: PlacedBlock[], index: number): Promise<PlacedBlock[]> {
            return moveBlock(stateItems, index, index + 1);
        },

        /**
         * Move an item to the first position
         *
         * @param {PlacedBlock[]} stateItems The current placed blocks in the state
         * @param {number} index The index of the placed block to move
         * @returns {Promise<PlacedBlock[]>}
         */
        async moveToFirst(stateItems: PlacedBlock[], index: number): Promise<PlacedBlock[]> {
            return moveBlock(stateItems, index, 0);
        },

        /**
         * Move an item to the last position
         *
         * @param {PlacedBlock[]} stateItems The current placed blocks in the state
         * @param {number} index The index of the placed block to move
         * @returns {Promise<PlacedBlock[]>}
         */
        async moveToLast(stateItems: PlacedBlock[], index: number): Promise<PlacedBlock[]> {
            return moveBlock(stateItems, index, stateItems.length - 1);
        },

        /**
         * Move an item up
         *
         * @param {PlacedBlock[]} stateItems The current placed blocks in the state
         * @param {number} index The index of the placed block to move
         * @returns {Promise<PlacedBlock[]>}
         */
        async moveUp(stateItems: PlacedBlock[], index: number): Promise<PlacedBlock[]> {
            return moveBlock(stateItems, index, index - 1);
        },

        /**
         * Marks an item as not deleted
         *
         * @param {PlacedBlock[]} stateItems The current placed blocks in the state
         * @param {number} index The position of the item
         * @returns {Promise<PlacedBlock[]>}
         */
        async undoDelete(stateItems: PlacedBlock[], index: number): Promise<PlacedBlock[]> {
            const newState = stateItems;
            newState[index].isDeleted = false;
            return newState;
        },

        /**
         * Change the block label
         *
         * @param {PlacedBlock[]} stateItems The current placed blocks in the state
         * @param {number} index The position of the block being renamed
         * @param {string} newName The new label for the block
         * @returns {Promise<PlacedBlock[]>}
         */
        async rename(stateItems: PlacedBlock[], index: number, newName: string): Promise<PlacedBlock[]> {
            const newState = stateItems;
            // The data is immutable so we need to clone it first in order to update the block data
            const blockData = cloneDeep(newState[index].blockData);
            blockData.label = newName;
            newState[index].blockData = blockData;
            return newState;
        },

        /**
         * Removes an item from this canvas
         *
         * @param {PlacedBlock[]} stateItems The current placed blocks in the state
         * @param {number} index The position of the item being deleted
         * @returns {Promise<PlacedBlock[]>}
         */
        async removeFromCanvas(stateItems: PlacedBlock[], index: number): Promise<PlacedBlock[]> {
            const newState = stateItems;
            newState.splice(index, 1);
            return newState;
        },
    });

[bowheart]

@erictompkins within the normal store reducers? No, those are sync-only. But you shouldn't need to handle this at the store reducer level. This hook has several features that don't perfectly align with stuff Zedux has out of the box. And that's fine - they can all go in a custom injector.

Copying the whole hook into an injectSimpleReducer injector and replacing useRef, useEffect, and useCallback usages with injectRef, injectEffect, and injectCallback, and refactoring useState usages to use injectStore (or injectSignal in v2) would be the most standard way to do this.

If you don't mind some (honestly minor) React version lock-in, you could even avoid copying the hook by replacing React's dispatcher and using the hook directly in an injector like this:

const injectSimpleReducer: typeof useSimpleReducer = (...args) => {
  // assuming React v19, the internals look like this:
  const internals =
    React.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE ??
    React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE

  if (!internals) {
    throw new Error(
      'React internals not found. This injector must be updated for React versions besides v19'
    )
  }

  const prevDispatcher = internals.H

  // replace React's dispatcher, supplanting the hooks that we know `useSimpleReducer` uses with Zedux injectors.
  internals.H = {
    useCallback: injectCallback,
    useRef: injectRef,
    useEffect: injectEffect,
    useState: <T,>(stateOrFactory: T | (() => T)) => {
      const signal = injectSignal(stateOrFactory) // assuming Zedux v2

      return [signal.get(), (value: T) => signal.set(value)]
    },
  }
  const result = useSimpleReducer(...args)
  internals.H = prevDispatcher // restore the previous dispatcher

  return result
}

// then use in an atom like so:
const exampleAtom = atom('example', () => {
  const [count, actions, queue, error] = injectSimpleReducer(0, {
    increment: async state => state + 1,
    decrement: async state => state - 1,
  })
})

This is obviously frowned upon in React but meh, Zedux makes it easy and it works and is pretty clear about being tied to a specific React version.

[erictompkins]

Thank you @bowheart. We ended up removing the need for async, and we are now just trying to get the Reducer to work. The documentation is helpful, but we're missing a few things. I started a separate discussion on how to use the reducer. #259