Hotfix/2021 07 24 add config redux devtools

package.json

@@ -17,6 +17,7 @@
     "react-redux": "^7.2.2",
     "react-scripts": "4.0.1",
     "redux": "^4.0.5",
+    "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.3.0",
     "typescript": "^4.1.3",
     "web-vitals": "^0.2.4"

src/components/TodoList.tsx

@@ -1,10 +1,11 @@
-import React, {useEffect} from 'react';
-import {useTypedSelector} from "../hooks/useTypedSelector";
-import {useActions} from "../hooks/useActions";
+import { useEffect, FC } from 'react';
+import { useTypedSelector } from "../hooks/useTypedSelector";
+import { useActions } from "../hooks/useActions";
+import { TodoModel } from '../types/todo';
 
-const TodoList: React.FC = () => {
-    const {page, error, loading, todos, limit} = useTypedSelector(state => state.todo)
-    const {fetchTodos, setTodoPage} = useActions()
+const TodoList: FC = () => {
+    const { page, error, loading, todos, limit } = useTypedSelector(state => state.todo)
+    const { fetchTodos, setTodoPage } = useActions()
     const pages = [1, 2, 3, 4, 5]
 
     useEffect(() => {
@@ -20,14 +21,14 @@ const TodoList: React.FC = () => {
 
     return (
         <div>
-            {todos.map(todo =>
+            {todos.map((todo: TodoModel) =>
                 <div key={todo.id}>{todo.id} - {todo.title}</div>
             )}
-            <div style={{display: "flex"}}>
+            <div style={{ display: "flex" }}>
                 {pages.map(p =>
                     <div
                         onClick={() => setTodoPage(p)}
-                        style={{border:p === page ? '2px solid green' : '1px solid gray', padding: 10}}
+                        style={{ border: p === page ? '2px solid green' : '1px solid gray', padding: 10 }}
                     >
                         {p}
                     </div>

src/components/UserList.tsx

@@ -1,11 +1,11 @@
-import React, {useEffect} from 'react';
-import {useTypedSelector} from "../hooks/useTypedSelector";
-import {fetchUsers} from "../store/action-creators/user";
-import {useActions} from "../hooks/useActions";
+import { useEffect, FC } from 'react';
+import { useTypedSelector } from "../hooks/useTypedSelector";
+import { useActions } from "../hooks/useActions";
+import { UserModel } from '../types/user';
 
-const UserList: React.FC = () => {
-    const {users, error, loading} = useTypedSelector(state => state.user)
-    const {fetchUsers} = useActions()
+const UserList: FC = () => {
+    const { users, error, loading } = useTypedSelector(state => state.user)
+    const { fetchUsers } = useActions()
 
     useEffect(() => {
         fetchUsers()
@@ -20,8 +20,8 @@ const UserList: React.FC = () => {
 
     return (
         <div>
-            {users.map(user =>
-                <div key={user.id}>{user.name}</div>
+            {users.map((user: UserModel) =>
+                <div key={user.id}>Name: {user.name} - company: {user.company.name}</div>
             )}
         </div>
     );

src/store/index.ts

@@ -1,6 +1,13 @@
-import {applyMiddleware, createStore} from "redux";
+import { createStore, compose, applyMiddleware } from "redux";
 import thunk from "redux-thunk";
-import {rootReducer} from "./reducers";
+import { rootReducer } from "./reducers";
 
+declare global {
+    interface Window {
+        __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
+    }
+}
 
-export const store = createStore(rootReducer, applyMiddleware(thunk))
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+export const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)));

src/types/todo.ts

@@ -7,9 +7,9 @@ export interface TodoState {
 }
 
 export enum TodoActionTypes {
-    FETCH_TODOS= 'FETCH_TODOS',
-    FETCH_TODOS_SUCCESS= 'FETCH_TODOS_SUCCESS',
-    FETCH_TODOS_ERROR= 'FETCH_TODOS_ERROR',
+    FETCH_TODOS = 'FETCH_TODOS',
+    FETCH_TODOS_SUCCESS = 'FETCH_TODOS_SUCCESS',
+    FETCH_TODOS_ERROR = 'FETCH_TODOS_ERROR',
     SET_TODO_PAGE = 'SET_TODO_PAGE'
 }
 interface FetchTodoAction {
@@ -27,6 +27,12 @@ interface SetTodoPage {
     type: TodoActionTypes.SET_TODO_PAGE;
     payload: number;
 }
+export interface TodoModel {
+    id: number;
+    userId: number;
+    title: string;
+    completed: boolean;
+}
 
 export type TodoAction =
     FetchTodoAction

src/types/user.ts

@@ -19,4 +19,35 @@ interface FetchUsersErrorAction {
     type: UserActionTypes.FETCH_USERS_ERROR;
     payload: string;
 }
+
+export interface UserModel {
+    id: number;
+    name: string;
+    username: string;
+    email: string;
+    address: Address;
+    phone: string;
+    website: string;
+    company: Company;
+}
+
+interface Address {
+    street: string;
+    suite: string;
+    city: string;
+    zipcode: string;
+    geo: Geo;
+}
+
+interface Geo {
+    lat: string;
+    lng: string;
+}
+
+interface Company {
+    name: string;
+    catchPhrase: string;
+    bs: string;
+}
+
 export type UserAction = FetchUsersAction | FetchUsersErrorAction | FetchUsersSuccessAction