Skip to content

Commit 3826e75

Browse files
structlooperstructlooper
committed
redux implementation done
1 parent 84fd255 commit 3826e75

File tree

9 files changed

+423
-12
lines changed

9 files changed

+423
-12
lines changed

‎package-lock.json

+259
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+5
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,12 @@
99
"lodash": "^4.17.21",
1010
"react": "^18.2.0",
1111
"react-dom": "^18.2.0",
12+
"react-helmet": "^6.1.0",
13+
"react-redux": "^8.0.5",
1214
"react-scripts": "^2.1.3",
15+
"redux": "^4.2.1",
16+
"redux-persist": "^6.0.0",
17+
"redux-thunk": "^2.4.2",
1318
"web-vitals": "^2.1.4"
1419
},
1520
"scripts": {

‎src/Redux/action.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {SET_CURRENT_PAGE, SET_CURRENT_PAGE_TITLE} from './actionType'
2+
3+
export const setCurrentPageName = val => dispatch => {
4+
dispatch({
5+
type: SET_CURRENT_PAGE,
6+
payload: val,
7+
});
8+
};
9+
export const setCurrentPageTitle = val => dispatch => {
10+
dispatch({
11+
type: SET_CURRENT_PAGE_TITLE,
12+
payload: val,
13+
});
14+
};

‎src/Redux/actionType.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export const SET_CURRENT_PAGE = 'SetCurrentPage';
2+
export const SET_CURRENT_PAGE_TITLE = 'SetCurrentPageTitle';
3+
4+
5+
6+
7+
8+
9+
10+

‎src/Redux/reducers.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import Config from '../config'
2+
import {SET_CURRENT_PAGE_TITLE,SET_CURRENT_PAGE} from "./actionType";
3+
4+
const currentSessionState = {
5+
pageName: Config.appName,
6+
pageTitle: Config.title,
7+
};
8+
9+
export function currentSessionStateReducer(state = currentSessionState, action) {
10+
switch (action.type) {
11+
case SET_CURRENT_PAGE:
12+
return {...state, pageName: action.payload};
13+
case SET_CURRENT_PAGE_TITLE:
14+
return {...state, pageTitle: action.payload};
15+
default:
16+
return state;
17+
}
18+
}
19+
export const CURRENT_SESSION_STATE_REDUCER = "currentSessionStateReducer";
20+

‎src/Redux/store.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {createStore, combineReducers, applyMiddleware} from 'redux';
2+
import {persistStore, persistReducer} from 'redux-persist';
3+
import storage from 'redux-persist/lib/storage'
4+
import thunk from 'redux-thunk';
5+
import * as Reducers from './reducers';
6+
import {useSelector} from "react-redux";
7+
8+
const persistConfig = {
9+
key: 'persist-root',
10+
storage: storage,
11+
};
12+
const rootReducer = combineReducers(Reducers);
13+
const persistedReducer = persistReducer(persistConfig, rootReducer);
14+
export const store = createStore(persistedReducer, applyMiddleware(thunk));
15+
export const persistVar = persistStore(store);
16+
export const getStateFromSelector =selector=>useSelector(cs => cs[selector]);

‎src/index.js

+8-2
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,17 @@ import ReactDOM from 'react-dom/client';
33
import './index.css';
44
import App from './App';
55
import reportWebVitals from './reportWebVitals';
6-
6+
import {Provider} from "react-redux";
7+
import {persistVar, store} from "./Redux/store";
8+
import { PersistGate } from 'redux-persist/integration/react';
79
const root = ReactDOM.createRoot(document.getElementById('root'));
810
root.render(
911
<React.StrictMode>
10-
<App />
12+
<Provider store={store}>
13+
<PersistGate persistor={persistVar}>
14+
<App />
15+
</PersistGate>
16+
</Provider>
1117
</React.StrictMode>
1218
);
1319

‎src/views/index.js

+10-3
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,19 @@
44
* @Author STRUCTLOOPER
55
* */
66
import React from 'react';
7+
import {Helmet} from 'react-helmet';
8+
import {getStateFromSelector} from "../Redux/store";
9+
import {CURRENT_SESSION_STATE_REDUCER} from "../Redux/reducers";
710

811
const Application = () => {
12+
const {pageTitle, pageName} = getStateFromSelector(CURRENT_SESSION_STATE_REDUCER);
913
return (
10-
<div>
11-
<h1>Boot app</h1>
12-
</div>
14+
<>
15+
<Helmet>
16+
<title>{pageTitle}</title>
17+
</Helmet>
18+
<h1>This is {pageName}</h1>
19+
</>
1320
);
1421
};
1522

‎yarn.lock

+81-7
Original file line numberDiff line numberDiff line change
@@ -1186,7 +1186,7 @@
11861186
"resolved" "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz"
11871187
"version" "0.8.0"
11881188

1189-
"@babel/runtime@^7.12.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
1189+
"@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
11901190
"integrity" "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw=="
11911191
"resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz"
11921192
"version" "7.21.0"
@@ -1403,6 +1403,14 @@
14031403
"resolved" "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz"
14041404
"version" "5.0.1"
14051405

1406+
"@types/hoist-non-react-statics@^3.3.1":
1407+
"integrity" "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA=="
1408+
"resolved" "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz"
1409+
"version" "3.3.1"
1410+
dependencies:
1411+
"@types/react" "*"
1412+
"hoist-non-react-statics" "^3.3.0"
1413+
14061414
"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
14071415
"integrity" "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g=="
14081416
"resolved" "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz"
@@ -1445,14 +1453,14 @@
14451453
"resolved" "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz"
14461454
"version" "1.5.5"
14471455

1448-
"@types/react-dom@^18.0.0":
1456+
"@types/react-dom@^16.8 || ^17.0 || ^18.0", "@types/react-dom@^18.0.0":
14491457
"integrity" "sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw=="
14501458
"resolved" "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.11.tgz"
14511459
"version" "18.0.11"
14521460
dependencies:
14531461
"@types/react" "*"
14541462

1455-
"@types/react@*":
1463+
"@types/react@*", "@types/react@^16.8 || ^17.0 || ^18.0":
14561464
"integrity" "sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew=="
14571465
"resolved" "https://registry.npmjs.org/@types/react/-/react-18.0.28.tgz"
14581466
"version" "18.0.28"
@@ -1483,6 +1491,11 @@
14831491
dependencies:
14841492
"@types/jest" "*"
14851493

1494+
"@types/use-sync-external-store@^0.0.3":
1495+
"integrity" "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
1496+
"resolved" "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz"
1497+
"version" "0.0.3"
1498+
14861499
"@types/yargs-parser@*":
14871500
"integrity" "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA=="
14881501
"resolved" "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz"
@@ -5465,6 +5478,13 @@
54655478
"resolved" "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz"
54665479
"version" "4.2.1"
54675480

5481+
"hoist-non-react-statics@^3.3.0", "hoist-non-react-statics@^3.3.2":
5482+
"integrity" "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw=="
5483+
"resolved" "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
5484+
"version" "3.3.2"
5485+
dependencies:
5486+
"react-is" "^16.7.0"
5487+
54685488
"home-or-tmp@^2.0.0":
54695489
"integrity" "sha512-ycURW7oUxE2sNiPVw1HVEFsW+ecOpJ5zaj7eC0RlwhibhRBod20muUN8qu/gzx956YrLolVvs1MTXwKgC2rVEg=="
54705490
"resolved" "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz"
@@ -9130,7 +9150,7 @@
91309150
"kleur" "^2.0.1"
91319151
"sisteransi" "^0.1.1"
91329152

9133-
"prop-types@^15.6.2":
9153+
"prop-types@^15.6.2", "prop-types@^15.7.2":
91349154
"integrity" "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="
91359155
"resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
91369156
"version" "15.8.1"
@@ -9341,7 +9361,7 @@
93419361
"strip-ansi" "5.0.0"
93429362
"text-table" "0.2.0"
93439363

9344-
"react-dom@^18.0.0", "react-dom@^18.2.0":
9364+
"react-dom@^16.8 || ^17.0 || ^18.0", "react-dom@^18.0.0", "react-dom@^18.2.0":
93459365
"integrity" "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="
93469366
"resolved" "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
93479367
"version" "18.2.0"
@@ -9354,7 +9374,22 @@
93549374
"resolved" "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.6.tgz"
93559375
"version" "5.1.6"
93569376

9357-
"react-is@^16.13.1":
9377+
"react-fast-compare@^3.1.1":
9378+
"integrity" "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
9379+
"resolved" "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz"
9380+
"version" "3.2.0"
9381+
9382+
"react-helmet@^6.1.0":
9383+
"integrity" "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw=="
9384+
"resolved" "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz"
9385+
"version" "6.1.0"
9386+
dependencies:
9387+
"object-assign" "^4.1.1"
9388+
"prop-types" "^15.7.2"
9389+
"react-fast-compare" "^3.1.1"
9390+
"react-side-effect" "^2.1.0"
9391+
9392+
"react-is@^16.13.1", "react-is@^16.7.0":
93589393
"integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
93599394
"resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
93609395
"version" "16.13.1"
@@ -9369,6 +9404,18 @@
93699404
"resolved" "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
93709405
"version" "18.2.0"
93719406

9407+
"react-redux@^8.0.5":
9408+
"integrity" "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw=="
9409+
"resolved" "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz"
9410+
"version" "8.0.5"
9411+
dependencies:
9412+
"@babel/runtime" "^7.12.1"
9413+
"@types/hoist-non-react-statics" "^3.3.1"
9414+
"@types/use-sync-external-store" "^0.0.3"
9415+
"hoist-non-react-statics" "^3.3.2"
9416+
"react-is" "^18.0.0"
9417+
"use-sync-external-store" "^1.0.0"
9418+
93729419
"react-scripts@^2.1.3":
93739420
"integrity" "sha512-JASD0QVVgSVleVhA9TeA+UBx+shq887hm/L+09qjZLrqIUvJZHZU+oOnhMFGot02Yop+LKfkvf9KSsTNlu/Rwg=="
93749421
"resolved" "https://registry.npmjs.org/react-scripts/-/react-scripts-2.1.3.tgz"
@@ -9424,7 +9471,12 @@
94249471
optionalDependencies:
94259472
"fsevents" "1.2.4"
94269473

9427-
"react@^18.0.0", "react@^18.2.0":
9474+
"react-side-effect@^2.1.0":
9475+
"integrity" "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw=="
9476+
"resolved" "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz"
9477+
"version" "2.1.2"
9478+
9479+
"react@^16.3.0 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>=16.3.0":
94289480
"integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
94299481
"resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
94309482
"version" "18.2.0"
@@ -9534,6 +9586,23 @@
95349586
"indent-string" "^4.0.0"
95359587
"strip-indent" "^3.0.0"
95369588

9589+
"redux-persist@^6.0.0":
9590+
"integrity" "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ=="
9591+
"resolved" "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz"
9592+
"version" "6.0.0"
9593+
9594+
"redux-thunk@^2.4.2":
9595+
"integrity" "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q=="
9596+
"resolved" "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz"
9597+
"version" "2.4.2"
9598+
9599+
"redux@^4", "redux@^4.2.1", "redux@>4.0.0":
9600+
"integrity" "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w=="
9601+
"resolved" "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz"
9602+
"version" "4.2.1"
9603+
dependencies:
9604+
"@babel/runtime" "^7.9.2"
9605+
95379606
"regenerate-unicode-properties@^10.1.0":
95389607
"integrity" "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ=="
95399608
"resolved" "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz"
@@ -11097,6 +11166,11 @@
1109711166
"punycode" "1.3.2"
1109811167
"querystring" "0.2.0"
1109911168

11169+
"use-sync-external-store@^1.0.0":
11170+
"integrity" "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA=="
11171+
"resolved" "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
11172+
"version" "1.2.0"
11173+
1110011174
"use@^3.1.0":
1110111175
"integrity" "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
1110211176
"resolved" "https://registry.npmjs.org/use/-/use-3.1.1.tgz"

0 commit comments

Comments
 (0)