├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── app
        └── store.js
    ├── index.css
    ├── index.js
    ├── reportWebVitals.js
    └── services
        └── users.js


/README.md:
--------------------------------------------------------------------------------
1 | # react-redux-toolkit-rtk-query
2 | 
3 | React Redux Toolkit RTK Query: https://youtu.be/9V-Up8QT7tM
4 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import "./App.css";
 2 | import { useGetUsersQuery } from "./services/users";
 3 | 
 4 | function App() {
 5 |   const { data, error, isLoading, isSuccess, isError } = useGetUsersQuery();
 6 | 
 7 |   return (
 8 |     <div className="App">
 9 |       <h1>Welcome to React Redux Toolkit RTK Query</h1>
10 |       {isLoading && "Loading..."}
11 |       {isError && error.message}
12 |       {isSuccess &&
13 |         data &&
14 |         data.map((user, i) => <h1 key={user.id}>{user.name}</h1>)}
15 |     </div>
16 |   );
17 | }
18 | 
19 | export default App;
20 | 


--------------------------------------------------------------------------------
/src/app/store.js:
--------------------------------------------------------------------------------
 1 | import { configureStore } from "@reduxjs/toolkit";
 2 | import { setupListeners } from "@reduxjs/toolkit/query";
 3 | import { usersApi } from "../services/users";
 4 | 
 5 | export const store = configureStore({
 6 |   reducer: {
 7 |     [usersApi.reducerPath]: usersApi.reducer,
 8 |   },
 9 |   middleware: (getDefaultMiddiware) =>
10 |     getDefaultMiddiware().concat(usersApi.middleware),
11 | });
12 | 
13 | setupListeners(store.dispatch);
14 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import "./index.css";
 4 | import App from "./App";
 5 | import reportWebVitals from "./reportWebVitals";
 6 | import { Provider } from "react-redux";
 7 | import { store } from "./app/store";
 8 | 
 9 | ReactDOM.render(
10 |   <React.StrictMode>
11 |     <Provider store={store}>
12 |       <App />
13 |     </Provider>
14 |   </React.StrictMode>,
15 |   document.getElementById("root")
16 | );
17 | 
18 | // If you want to start measuring performance in your app, pass a function
19 | // to log results (for example: reportWebVitals(console.log))
20 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
21 | reportWebVitals();
22 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/services/users.js:
--------------------------------------------------------------------------------
 1 | import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 2 | 
 3 | export const usersApi = createApi({
 4 |   reducerPath: "users",
 5 |   baseQuery: fetchBaseQuery({
 6 |     baseUrl: "https://jsonplaceholder.typicode.com",
 7 |   }),
 8 |   endpoints: (builder) => ({
 9 |     getUsers: builder.query({
10 |       query: () => `users`,
11 |     }),
12 |   }),
13 | });
14 | 
15 | export const { useGetUsersQuery } = usersApi;
16 | 


--------------------------------------------------------------------------------