14. What are best practices for organizing async logic with thunks?

Question

Accepted Answer

When working with thunks in Redux Toolkit, organizing asynchronous logic effectively is key to maintaining scalability, readability, and testability. Good structure helps prevent side effects from leaking into components and keeps your Redux logic clean. **1. Keep Thunks Focused:** Each thunk should handle a single async operation (e.g., fetching, updating, or deleting data) rather than combining multiple unrelated processes. **2. Use createAsyncThunk:** Prefer `createAsyncThunk` over manual thunk creation to automatically handle pending, fulfilled, and rejected action types. **3. Handle Errors Gracefully:** Use `try/catch` inside the thunk or rely on RTK’s rejected action handling to manage API failures cleanly. **4. Use getState for Conditional Fetching:** Avoid unnecessary API calls by checking cached data before fetching new data. **5. Dispatch Other Actions When Needed:** Thunks can dispatch other actions for UI updates, logging, or additional workflows. **6. Keep Side Effects Inside Thunks, Not Reducers:** Reducers must stay pure — perform side effects like API calls only inside thunks. **7. Use unwrap() for Error Propagation:** The `unwrap()` method helps handle success or failure directly in components using async/await syntax. import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchUserData = createAsyncThunk(
  'user/fetchUserData',
  async (userId, { getState, rejectWithValue }) => {
    try {
      const { users } = getState();
      if (users.cache[userId]) {
        return users.cache[userId]; // Skip API call if cached
      }

const response = await fetch(`/api/users/${userId}`);
      if (!response.ok) throw new Error('Failed to fetch user data');

const data = await response.json();
      return data;
    } catch (err) {
      return rejectWithValue(err.message);
    }
  }
);

14. What are best practices for organizing async logic with thunks?

Best Practices for Organizing Async Logic with Thunks in Redux Toolkit

14. What are best practices for organizing async logic with thunks?

Best Practices for Organizing Async Logic with Thunks in Redux Toolkit

Scenario Questions

Follow-up Questions