├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── app
        └── store.js
    ├── features
        └── users
        │   └── usersSlice.js
    ├── index.css
    ├── index.js
    └── reportWebVitals.js


/README.md:
--------------------------------------------------------------------------------
1 | # react-redux-toolkit
2 | 
3 | Redux Toolkit Crash course on YouTube: https://youtu.be/7ujSgXRnyig
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 React, { useEffect } from "react";
 2 | import { useSelector, useDispatch } from "react-redux";
 3 | import { getUsers } from "./features/users/usersSlice";
 4 | import "./App.css";
 5 | 
 6 | function App() {
 7 |   const dispatch = useDispatch();
 8 |   const { users } = useSelector((state) => state.users);
 9 | 
10 |   useEffect(() => {
11 |     dispatch(getUsers());
12 |   }, [dispatch]);
13 | 
14 |   return (
15 |     <div className="App">
16 |       <h1>Welcome to React Redux Toolkit Crash Course</h1>
17 |       {users && users.map((user, i) => <h1 key={i}>{user.name}</h1>)}
18 |     </div>
19 |   );
20 | }
21 | 
22 | export default App;
23 | 


--------------------------------------------------------------------------------
/src/app/store.js:
--------------------------------------------------------------------------------
 1 | import { configureStore } from "@reduxjs/toolkit";
 2 | import usersReducer from "../features/users/usersSlice";
 3 | 
 4 | const store = configureStore({
 5 |   reducer: {
 6 |     users: usersReducer,
 7 |   },
 8 | });
 9 | 
10 | export default store;
11 | 


--------------------------------------------------------------------------------
/src/features/users/usersSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
 2 | 
 3 | export const getUsers = createAsyncThunk(
 4 |   "users/getUsers",
 5 |   async (dispatch, getState) => {
 6 |     return await fetch("https://jsonplaceholder.typicode.com/users").then(
 7 |       (res) => res.json()
 8 |     );
 9 |   }
10 | );
11 | 
12 | const usersSlice = createSlice({
13 |   name: "user",
14 |   initialState: {
15 |     users: [],
16 |     status: null,
17 |   },
18 |   extraReducers: {
19 |     [getUsers.pending]: (state, action) => {
20 |       state.status = "loading";
21 |     },
22 |     [getUsers.fulfilled]: (state, action) => {
23 |       state.status = "success";
24 |       state.users = action.payload;
25 |     },
26 |     [getUsers.rejected]: (state, action) => {
27 |       state.status = "failed";
28 |     },
29 |   },
30 | });
31 | 
32 | export default usersSlice.reducer;
33 | 


--------------------------------------------------------------------------------
/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 | 


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