hw10

src/index.tsx

@@ -3,13 +3,17 @@ import ReactDOM from 'react-dom/client'
 import './index.css'
 import App from './s1-main/App'
 import reportWebVitals from './reportWebVitals'
+import {Provider} from 'react-redux'
+import store from './s2-homeworks/hw10/bll/store'
 
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
 )
 root.render(
     <React.StrictMode>
-        <App/>
+        <Provider store={store}>
+            <App/>
+        </Provider>
     </React.StrictMode>
 )
 

src/s2-homeworks/hw05/pages/JuniorPlus.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
+import HW10 from '../../hw10/HW10'
 
 function JuniorPlus() {
     return (
         <div id={'hw5-page-junior-plus'}>
             junior plus page
-            {/*<HW10/>*/}
+            <HW10/>
             {/*<HW11/>*/}
             {/*<HW12/>*/}
             {/*<HW13/>*/}

src/s2-homeworks/hw10/HW10.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import {useDispatch, useSelector} from 'react-redux'
+import {AppStoreType} from './bll/store'
+import {loadingAC} from './bll/loadingReducer'
+import SuperButton from '../hw04/common/c2-SuperButton/SuperButton'
+import s2 from '../../s1-main/App.module.css'
+
+const HW10 = () => {
+    // useSelector, useDispatch
+    const isLoading = useSelector<AppStoreType, boolean>((state: any) => state.loading.isLoading)
+    const dispatch = useDispatch()
+
+    const setLoading = () => {
+        // dispatch
+        dispatch(loadingAC(true))
+
+        // setTimeout
+        setTimeout(() => {
+            dispatch(loadingAC(false))
+        }, 1500)
+        // console.log('loading...')
+    }
+
+    return (
+        <div id={'hw10'} className={s2.hw}>
+            <hr/>
+            {/*можно убрать этот тег*/}
+
+            {/*should work (должно работать)*/}
+            {isLoading
+                ? (
+                    <div id={'hw10-loading'}>крутилка...</div>
+                ) : (
+                    <div>
+                        <SuperButton id={'hw10-button-start-loading'} onClick={setLoading}>set loading...</SuperButton>
+                    </div>
+                )
+            }
+
+            <hr/>
+            {/*можно убрать этот тег*/}
+            <hr/>
+            {/*можно убрать этот тег*/}
+        </div>
+    )
+}
+
+export default HW10

src/s2-homeworks/hw10/bll/loadingReducer.ts

@@ -0,0 +1,22 @@
+const initState = {
+    isLoading: false
+}
+
+export const loadingReducer = (state = initState, action: LoadingActionType): typeof initState=> { // fix any
+    switch (action.type) {
+        case 'CHANGE_LOADING': {
+            return {
+                ...state,
+                isLoading: action.isLoading
+            }
+        }
+        default: return state
+    }
+}
+
+type LoadingActionType = {
+    type: 'CHANGE_LOADING'
+    isLoading: boolean
+}
+
+export const loadingAC = (isLoading: boolean): LoadingActionType => ({type: 'CHANGE_LOADING', isLoading}) // fix any

src/s2-homeworks/hw10/bll/store.ts

@@ -0,0 +1,16 @@
+import {loadingReducer} from './loadingReducer'
+import {combineReducers, legacy_createStore} from 'redux'
+
+const reducers = combineReducers({
+    loading: loadingReducer,
+
+})
+
+const store = legacy_createStore(reducers)
+
+export default store
+
+export type AppStoreType = ReturnType<typeof reducers>
+
+// @ts-ignore
+window.store = store // for dev // может для проверки работы стора задиспатчить экшн через консоль? // store.dispatch({type:'CHANGE_LOADING', isLoading: true})