From 7bfb635a3728239984e32bd234f925dc104e38b7 Mon Sep 17 00:00:00 2001 From: neko Date: Wed, 15 Jun 2022 13:14:32 +0300 Subject: [PATCH] hw10 --- package.json | 2 + src/index.tsx | 6 ++- src/s2-homeworks/hw05/pages/JuniorPlus.tsx | 3 +- src/s2-homeworks/hw10/HW10.tsx | 48 +++++++++++++++++++++ src/s2-homeworks/hw10/bll/loadingReducer.ts | 22 ++++++++++ src/s2-homeworks/hw10/bll/store.ts | 16 +++++++ yarn.lock | 48 ++++++++++++++++++++- 7 files changed, 141 insertions(+), 4 deletions(-) create mode 100644 src/s2-homeworks/hw10/HW10.tsx create mode 100644 src/s2-homeworks/hw10/bll/loadingReducer.ts create mode 100644 src/s2-homeworks/hw10/bll/store.ts diff --git a/package.json b/package.json index 433da5a..9dbda2b 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,10 @@ "gh-pages": "^4.0.0", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-redux": "^8.0.2", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", + "redux": "^4.2.0", "typescript": "^4.4.2", "uuid": "^8.3.2", "web-vitals": "^2.1.0" diff --git a/src/index.tsx b/src/index.tsx index 4774730..610ca37 100644 --- a/src/index.tsx +++ b/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( - + + + ) diff --git a/src/s2-homeworks/hw05/pages/JuniorPlus.tsx b/src/s2-homeworks/hw05/pages/JuniorPlus.tsx index ca96c0f..c29f15d 100644 --- a/src/s2-homeworks/hw05/pages/JuniorPlus.tsx +++ b/src/s2-homeworks/hw05/pages/JuniorPlus.tsx @@ -1,10 +1,11 @@ import React from 'react' +import HW10 from '../../hw10/HW10' function JuniorPlus() { return (
junior plus page - {/**/} + {/**/} {/**/} {/**/} diff --git a/src/s2-homeworks/hw10/HW10.tsx b/src/s2-homeworks/hw10/HW10.tsx new file mode 100644 index 0000000..de58346 --- /dev/null +++ b/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((state: any) => state.loading.isLoading) + const dispatch = useDispatch() + + const setLoading = () => { + // dispatch + dispatch(loadingAC(true)) + + // setTimeout + setTimeout(() => { + dispatch(loadingAC(false)) + }, 1500) + // console.log('loading...') + } + + return ( +
+
+ {/*можно убрать этот тег*/} + + {/*should work (должно работать)*/} + {isLoading + ? ( +
крутилка...
+ ) : ( +
+ set loading... +
+ ) + } + +
+ {/*можно убрать этот тег*/} +
+ {/*можно убрать этот тег*/} +
+ ) +} + +export default HW10 diff --git a/src/s2-homeworks/hw10/bll/loadingReducer.ts b/src/s2-homeworks/hw10/bll/loadingReducer.ts new file mode 100644 index 0000000..a804e95 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/s2-homeworks/hw10/bll/store.ts b/src/s2-homeworks/hw10/bll/store.ts new file mode 100644 index 0000000..cf6071d --- /dev/null +++ b/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 + +// @ts-ignore +window.store = store // for dev // может для проверки работы стора задиспатчить экшн через консоль? // store.dispatch({type:'CHANGE_LOADING', isLoading: true}) diff --git a/yarn.lock b/yarn.lock index 30ae382..c7d5726 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1035,7 +1035,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.7.6": +"@babel/runtime@^7.12.1", "@babel/runtime@^7.7.6": version "7.18.3" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4" integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug== @@ -1863,6 +1863,14 @@ dependencies: "@types/node" "*" +"@types/hoist-non-react-statics@^3.3.1": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/html-minifier-terser@^6.0.0": version "6.1.0" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35" @@ -2029,6 +2037,11 @@ resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756" integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg== +"@types/use-sync-external-store@^0.0.3": + version "0.0.3" + resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43" + integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA== + "@types/uuid@^8.3.4": version "8.3.4" resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc" @@ -4706,6 +4719,13 @@ history@^5.2.0: dependencies: "@babel/runtime" "^7.7.6" +hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hoopy@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d" @@ -7275,7 +7295,7 @@ react-error-overlay@^6.0.11: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb" integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg== -react-is@^16.13.1: +react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -7290,6 +7310,18 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67" integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg== +react-redux@^8.0.2: + version "8.0.2" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.2.tgz#bc2a304bb21e79c6808e3e47c50fe1caf62f7aad" + integrity sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA== + dependencies: + "@babel/runtime" "^7.12.1" + "@types/hoist-non-react-statics" "^3.3.1" + "@types/use-sync-external-store" "^0.0.3" + hoist-non-react-statics "^3.3.2" + react-is "^18.0.0" + use-sync-external-store "^1.0.0" + react-refresh@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" @@ -7416,6 +7448,13 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" +redux@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13" + integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA== + dependencies: + "@babel/runtime" "^7.9.2" + regenerate-unicode-properties@^10.0.1: version "10.0.1" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56" @@ -8493,6 +8532,11 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" +use-sync-external-store@^1.0.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" + integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== + util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"