I can't seem to fully understand React-Redux...

[MarshallNickolauson]

Body

I've recently been reading about Redux and it's benefits and use cases to include in my React projects. After getting past the deep legacy code for one simple API call or state management action, I'm stuck in trying to figure out the difference between using "createAsyncThunk" and "createApi" from the npm package "@reduxjs/toolkit". They both seem to do the same thing - make an API call to some external link, perform CRUD, update the state, and update the React component. I've manage to accomplish the exact same result with writing code for both functions.

For "createAsyncThunk", I have to make a slice with "createSlice" and pass it into the reducer in the app's store.js file. For "createApi", the same holds true, except I have to also add it into the middleware.

So, long story short, I am uncertain of the true benefits of choosing one over the other.

I'm working with React 18, React-Redux 9, and Redux-Toolkit 2 (latest as of this date)

Guidelines

• I have read and understood this category's guidelines before making this post.

[ferid333]

Hi @MarshallNickolauson

1. createAsyncThunk:

• Purpose: This is designed for handling asynchronous logic (like API calls) in a simple way. It’s great when you have a few API calls to make, or you want more control over how to handle the API response (e.g., additional side effects).
• Setup: You use createAsyncThunk inside your slice, and you can handle success, error, or loading states in your reducers.
• Flexibility: It gives you full control over each step of the API request and state management, but this also means more boilerplate.

2. createApi:

• Purpose: createApi from @reduxjs/toolkit/query is more specialized for managing multiple API calls and handling CRUD operations. It automatically generates action creators and reducers for you, so you don’t have to write them manually.
• Setup: You need to add createApi into your middleware, and it comes with built-in caching, automatic invalidation, and more advanced features that make managing APIs easier over time.
• Convenience: It abstracts a lot of the manual work, especially if your project involves a lot of API interactions. The downside might be less flexibility compared to createAsyncThunk if you need more customization.

[MarshallNickolauson]

Wow thank you so much. This is exactly what I needed to understand. You're the best!

[ferid333]

No problem. You can follow me and give me feedback as well. Thanks !