Skip to content

Commit d664c72

Browse files
committed
Add tips to Essentials Part 7 for RTKQ usage
1 parent 5714b04 commit d664c72

File tree

2 files changed

+16
-4
lines changed

2 files changed

+16
-4
lines changed

docs/tutorials/essentials/part-7-rtk-query-basics.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -285,7 +285,13 @@ export const PostsList = () => {
285285
}
286286
```
287287

288-
Conceptually, `<PostsList>` is still doing all the same work it was before, but we were able to replace the multiple `useSelector` calls and the `useEffect` dispatch with a single call to `useGetPostsQuery()`.
288+
Conceptually, `<PostsList>` is still doing all the same work it was before, but **we were able to replace the multiple `useSelector` calls and the `useEffect` dispatch with a single call to `useGetPostsQuery()`**.
289+
290+
:::tip
291+
292+
You should normally use the query hooks to access cached data in components - you _shouldn't_ write your own `useSelector` calls to access fetched data or `useEffect` calls to trigger fetching!
293+
294+
:::
289295

290296
Each generated query hook returns a "result" object containing several fields, including:
291297

@@ -445,13 +451,19 @@ We can see that we have a top-level `state.api` slice, as expected from the stor
445451

446452
RTK Query creates a "cache key" for each unique endpoint + argument combination, and stores the results for each cache key separately. That means that **you can use the same query hook multiple times, pass it different query parameters, and each result will be cached separately in the Redux store**.
447453

454+
:::tip
455+
456+
If you need the same data in multiple components, just call the same query hook with the same arguments in each component! For example, you can call `useGetPostQuery('123')` in three different components, and RTK Query will make sure the data is only fetched once, and each component will re-render as needed.
457+
458+
:::
459+
448460
It's also important to note that **the query parameter must be a _single_ value!** If you need to pass through multiple parameters, you must pass an object containing multiple fields (exactly the same as with `createAsyncThunk`). RTK Query will do a "shallow stable" comparison of the fields, and re-fetch the data if any of them have changed.
449461

450462
Notice that the names of the actions in the left-hand list are much more generic and less descriptive: `api/executeQuery/fulfilled`, instead of `posts/fetchPosts/fulfilled`. This is a tradeoff of using an additional abstraction layer. The individual actions do contain the specific endpoint name under `action.meta.arg.endpointName`, but it's not as easily viewable in the action history list.
451463

452464
:::tip
453465

454-
The Redux team is working on a new RTK Query view for the Redux DevTools that will specifically show RTK Query data in a more usable format. This includes info on each endpoint and cache result, stats on query timing, and much more. This will be added to the DevTools Extension in the near future. For a preview, see:
466+
The Redux DevTools have an "RTK Query" tab that specifically shows RTK Query data in a more usable format. This includes info on each endpoint and cache result, stats on query timing, and much more:
455467

456468
- [Redux DevTools #750: Add RTK Query-Inspector monitor](https://github.com/reduxjs/redux-devtools/pull/750)
457469
- [RTK Query Monitor preview demo](https://rtk-query-monitor-demo.netlify.app/)

docs/tutorials/fundamentals/part-5-ui-and-react.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@ In this section, we'll add a User Interface for our todo app. We'll see how Redu
2424

2525
:::caution
2626

27-
Note that **this page and all of the "Essentials" tutorial teach using [our modern React-Redux hooks API](https://react-redux.js.org/api/hooks)**. The old-style [`connect` API](https://react-redux.js.org/api/connect) still works, but today we want all Redux users using the hooks API.
27+
Note that **this page and all of the "Essentials" tutorial teach how to use [our modern React-Redux hooks API](https://react-redux.js.org/api/hooks)**. The old-style [`connect` API](https://react-redux.js.org/api/connect) still works, but today we want all Redux users using the hooks API.
2828

2929
Also, the other pages in this tutorial intentionally show older-style Redux logic patterns that require more code than the "modern Redux" patterns with Redux Toolkit we teach as the right approach for building apps with Redux today, in order to explain the principles and concepts behind Redux.
3030

31-
See [**the "Redux Essentials" tutorial**](../tutorials/essentials/part-1-overview-concepts.md) for full examples of "how to use Redux, the right way" with Redux Toolkit and React-Redux hooks for real-world apps.
31+
See [**the "Redux Essentials" tutorial**](../essentials/part-1-overview-concepts.md) for full examples of "how to use Redux, the right way" with Redux Toolkit and React-Redux hooks for real-world apps.
3232

3333
:::
3434

0 commit comments

Comments
 (0)