codesnips

usereducer

typescript 
import { useReducer } from 'react'

interface FormState {
  values: Record<string, any>
  errors: Record<string, string>
  touched: Record<string, boolean>

React useReducer for complex state logic

react hooks state-management
by Maya Patel 1 tab
javascript 
export const initialCart = { items: {} };

export function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM': {
      const { product, qty = 1 } = action;

Persist and Hydrate a Shopping Cart with useReducer and localStorage

react hooks usereducer
by codesnips 3 tabs
javascript 
export const MAX_VISIBLE = 4;

const DEFAULTS = {
  variant: "info",
  duration: 4000,
};

Toast Notification Queue in React with Context and useReducer

react context-api usereducer
by codesnips 3 tabs
typescript 
export interface Todo {
  id: string;
  title: string;
  done: boolean;
  pending: boolean;
}

Optimistic To-Do Toggle in React with Rollback via useReducer

react optimistic-ui hooks
by codesnips 3 tabs
typescript 
export interface CartItem {
  sku: string;
  name: string;
  unitPrice: number; // cents
  qty: number;
}

Shopping Cart Pricing with a useReducer State Machine and a Pure Discount Engine

react usereducer typescript
by codesnips 3 tabs
javascript 
export const initialState = (steps, initialData = {}) => ({
  steps,
  stepIndex: 0,
  data: initialData,
  errors: {},
});

Multi-Step Form Wizard in React With a useReducer State Machine

react hooks usereducer
by codesnips 4 tabs
typescript 
export interface Todo {
  id: string;
  title: string;
  done: boolean;
}

Optimistic Todo Toggling in React with Rollback via useReducer

javascript typescript react
by codesnips 3 tabs
javascript 
import React from 'react';

export function UndoSnackbar({ pending, onUndo }) {
  if (!pending) return null;

  return (

Undoable Delete with a Snackbar and useReducer Timeout Controller in React

react hooks usereducer
by codesnips 3 tabs
typescript 
export interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
}

Type-Safe Shopping Cart with useReducer, Context, and a useCart Hook

react context usereducer
by codesnips 4 tabs