From d664c72fd102aab5082d906c2fa9bc5749c9e7ca Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Mon, 6 Mar 2023 17:34:37 -0800 Subject: [PATCH] Add tips to Essentials Part 7 for RTKQ usage --- .../essentials/part-7-rtk-query-basics.md | 16 ++++++++++++++-- .../fundamentals/part-5-ui-and-react.md | 4 ++-- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/docs/tutorials/essentials/part-7-rtk-query-basics.md b/docs/tutorials/essentials/part-7-rtk-query-basics.md index 9b8487c06c..e3d86bac5e 100644 --- a/docs/tutorials/essentials/part-7-rtk-query-basics.md +++ b/docs/tutorials/essentials/part-7-rtk-query-basics.md @@ -285,7 +285,13 @@ export const PostsList = () => { } ``` -Conceptually, `` 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()`. +Conceptually, `` 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()`**. + +:::tip + +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! + +::: Each generated query hook returns a "result" object containing several fields, including: @@ -445,13 +451,19 @@ We can see that we have a top-level `state.api` slice, as expected from the stor 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**. +:::tip + +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. + +::: + 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. 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. :::tip -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: +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: - [Redux DevTools #750: Add RTK Query-Inspector monitor](https://github.com/reduxjs/redux-devtools/pull/750) - [RTK Query Monitor preview demo](https://rtk-query-monitor-demo.netlify.app/) diff --git a/docs/tutorials/fundamentals/part-5-ui-and-react.md b/docs/tutorials/fundamentals/part-5-ui-and-react.md index a65ba31933..9217cd1266 100644 --- a/docs/tutorials/fundamentals/part-5-ui-and-react.md +++ b/docs/tutorials/fundamentals/part-5-ui-and-react.md @@ -24,11 +24,11 @@ In this section, we'll add a User Interface for our todo app. We'll see how Redu :::caution -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. +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. 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. -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. +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. :::