Mastering Async Logic with Redux Thunk and Toolkit

What Is Redux Thunk?

Redux Thunk is a middleware that allows action creators to return functions instead of plain objects. This system acts as the bridge between asynchronous operations and Redux state updates.

Why This Matters

While ideal Redux patterns expect pure action objects, technical reality requires handling API calls and side effects that would otherwise throw errors. Without middleware like Thunk, components become bloated with duplicated logic and tightly coupled state management, significantly increasing the cost of maintenance and testing.

Key Insights

• Thunk allows action creators to return an async function that receives dispatch as a parameter.
• Redux Toolkit’s createAsyncThunk generates unique action identifier prefixes like ‘sliceName/actionName’ automatically.
• Modern slice layers use extraReducers to handle built-in pending, fulfilled, and rejected states.
• Thunk logic encompasses more than API calls, including caching, conditional fetching, and retries.
• The Service Layer pattern separates API fetch logic from the Thunk business logic layer.

Working Examples

Standard Redux Thunk implementation for handling authentication logic.

export const loginUser = (email, password) => {
  return async (dispatch) => {
    dispatch(setLoading(true))
    try {
      const response = await api.login(email, password)
      dispatch(loginSuccess(response.data))
    } catch (error) {
      dispatch(loginError(error.message))
    } finally {
      dispatch(setLoading(false))
    }
  }
}

Implementation using Redux Toolkit’s createAsyncThunk for cleaner async operations.

export const fetchProducts = createAsyncThunk(
  "products/fetchProducts",
  async () => {
    return await getProducts()
  }
)

Practical Applications

• Use case: Global authentication handling where loginUser thunks manage loading and error states across multiple components.
• Pitfall: Handling login directly inside a screen component, which causes logic duplication and decreases reusability.
• Use case: Product catalog fetching using createAsyncThunk to automatically manage pending and fulfilled UI states.
• Pitfall: Manually writing thunk boilerplate for standard API cycles instead of utilizing Redux Toolkit’s extraReducers.

References:

• https://dev.to/ola_1313/1-rn-thing-a-day-day-13-redux-thunk-209i