State Management and Data Flow

This tutorial covers how state management is implemented in the project using Redux Toolkit.

Overview

The project uses Redux Toolkit for state management, with a focus on:

• Wallet state management

• Alert/notification system

• Type-safe state access

• Service injection for async operations

Store Structure

The Redux store is organized as follows:

src/store/
├── index.ts           # Store configuration and setup
├── hooks.ts           # Custom hooks for Redux
├── wallet.ts          # Wallet-related utilities
└── slices/            # Redux slices
    ├── walletSlice.ts # Wallet state management
    └── alertSlice.ts  # Alert/notification system

Store Configuration

The main store configuration is in src/store/index.ts:

// Store configuration with service injection
export const store = configureStore({
  reducer: {
    wallet: walletReducer,
    oadaActions: oadaActionsReducer,
    alert: alertReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      thunk: {
        extraArgument: services,
      },
    }),
});

Key features:

• Service injection for async operations

• Combined reducers for different features

• Type-safe store configuration

Slices

Wallet Slice (walletSlice.ts)

Manages all wallet-related state:

• Wallet connection status

• UTxO tracking

• Balance calculations

• WebSocket notifications

• Reward account management

Example usage:

const walletState = useSelector((state: RootState) => state.wallet);

Alert Slice (alertSlice.ts)

Handles application alerts and notifications:

• Alert display

• Alert removal

• Unique ID generation

• Type-safe alert management

Example usage:

const dispatch = useDispatch();
dispatch(setAlert({ type: "success", message: "Operation successful" }));

Custom Hooks

The project provides custom hooks in src/store/hooks.ts for common Redux operations:

• useAppDispatch: Typed dispatch function

• useAppSelector: Typed selector hook

• Wallet-specific hooks

• Alert management hooks

Example:

import { useAppDispatch, useAppSelector } from "../store/hooks";

function MyComponent() {
  const dispatch = useAppDispatch();
  const wallet = useAppSelector((state) => state.wallet);

  // Use wallet state and dispatch actions
}

Best Practices

1. State Access

   • Use custom hooks for type-safe state access

   • Keep selectors close to where they're used

   • Memoize complex selectors

2. Actions

   • Use Redux Toolkit's createAsyncThunk for async operations

   • Keep actions focused and specific

   • Use proper typing for payloads

3. Reducers

   • Keep reducers pure

   • Use Immer for immutable updates

   • Handle all possible action types

4. Middleware

   • Use middleware for side effects

   • Keep middleware focused and specific

   • Use proper typing for middleware

Type Safety

The project maintains type safety through:

• Properly typed store configuration

• Type-safe actions and reducers

• Typed selectors and hooks

• Service injection typing

Example of type-safe action:

const setAlert = createAction<AlertPayload>("alert/set");

Testing

When testing Redux code:

1. Test reducers in isolation

2. Test action creators

3. Test selectors

4. Test async thunks with mocked services

Example test:

describe("walletSlice", () => {
  it("should handle initial state", () => {
    expect(walletReducer(undefined, { type: "unknown" })).toEqual({
      // Expected initial state
    });
  });
});

Next Steps

Now that you understand state management and data flow, you can proceed to:

1. Authentication and Authorization

2. API Integration and Services

Additional Resources

• Redux Toolkit Documentation

• React Query Documentation

• React Context Documentation

• Redux Best Practices