Skip to content

Commit aeb2942

Browse files
ericus123ericus123
authored
Merge pull request #6 from atlp-rwanda/ch-setup-redux-181414708
#181414708 (chore): Setup redux
2 parents 85d7e24 + 79231a6 commit aeb2942

File tree

8 files changed

+214
-7
lines changed

8 files changed

+214
-7
lines changed

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,13 @@
1313
"prepare": "husky install"
1414
},
1515
"dependencies": {
16+
"@reduxjs/toolkit": "^1.8.1",
1617
"react": "^18.1.0",
1718
"react-dom": "^18.1.0",
19+
"react-redux": "^8.0.1",
1820
"react-router-dom": "^6.3.0",
21+
"redux": "^4.2.0",
22+
"redux-persist": "^6.0.0",
1923
"sass": "^1.51.0"
2024
},
2125
"devDependencies": {

‎src/Index.jsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import { BrowserRouter } from 'react-router-dom';
4+
import { Provider } from 'react-redux';
5+
import { persistStore } from 'redux-persist';
6+
import { PersistGate } from 'redux-persist/integration/react';
7+
import store from './redux/store';
48

59
import App from './App';
610

11+
const persistor = persistStore(store);
12+
713
const root = ReactDOM.createRoot(document.getElementById('root'));
814
root.render(
9-
<BrowserRouter>
10-
<App />
11-
</BrowserRouter>
15+
<Provider store={store}>
16+
<PersistGate loading={null} persistor={persistor}>
17+
<BrowserRouter>
18+
<App />
19+
</BrowserRouter>
20+
</PersistGate>
21+
</Provider>
1222
);

‎src/components/home/Home.jsx‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,47 @@
1+
/* eslint-disable jsx-a11y/no-autofocus */
12
import React from 'react';
3+
import { useDispatch, useSelector } from 'react-redux';
4+
import {
5+
setDarkMode,
6+
setLightMode,
7+
selectBackgroundColor,
8+
} from '../../redux/features/color/colorSlice';
9+
import {
10+
changeVisibility,
11+
selectVisibility,
12+
} from '../../redux/features/visibility/visibilitySlice';
213
import './home.scss';
314

415
function Home() {
16+
const backgroundColor = useSelector(selectBackgroundColor);
17+
const visibility = useSelector(selectVisibility);
18+
const dispatch = useDispatch();
19+
520
return (
6-
<div className="welcome">
21+
<div className="welcome" style={{ backgroundColor }}>
722
<b>
8-
Welcome to <i>BAREFOOT NOMARD.</i>
23+
Welcome to <i>BAREFOOT NOMAD.</i>
924
</b>
25+
<button
26+
onClick={() => {
27+
dispatch(setDarkMode());
28+
dispatch(changeVisibility());
29+
}}
30+
type="button"
31+
autoFocus={visibility}
32+
>
33+
Dark mode
34+
</button>
35+
<button
36+
onClick={() => {
37+
dispatch(setLightMode());
38+
dispatch(changeVisibility());
39+
}}
40+
type="button"
41+
autoFocus={!visibility}
42+
>
43+
Light mode
44+
</button>
1045
</div>
1146
);
1247
}

‎src/redux/features/color/colorSlice.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { createSlice } from '@reduxjs/toolkit';
2+
3+
export const backgroundColorSlice = createSlice({
4+
name: 'backgroundColor',
5+
initialState: {
6+
value: '',
7+
},
8+
reducers: {
9+
setDarkMode: (state) => ({
10+
...state,
11+
value: '#152629',
12+
}),
13+
setLightMode: (state) => ({
14+
...state,
15+
value: '#64b2bc',
16+
}),
17+
},
18+
});
19+
20+
export const { setDarkMode, setLightMode } = backgroundColorSlice.actions;
21+
22+
export const selectBackgroundColor = (state) => state.backgroundColor.value;
23+
24+
export default backgroundColorSlice.reducer;

‎src/redux/features/visibility/visibilitySlice.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { createSlice } from '@reduxjs/toolkit';
2+
3+
export const visibilitySlice = createSlice({
4+
name: 'visibility',
5+
initialState: {
6+
value: true,
7+
},
8+
reducers: {
9+
changeVisibility: (state) => ({
10+
...state,
11+
value: !state.value,
12+
}),
13+
},
14+
});
15+
16+
export const { changeVisibility } = visibilitySlice.actions;
17+
18+
export const selectVisibility = (state) => state.visibility.value;
19+
20+
export default visibilitySlice.reducer;

‎src/redux/reducers.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { combineReducers } from 'redux';
2+
import backgroundColorReducer from './features/color/colorSlice';
3+
import visibilitySliceReducer from './features/visibility/visibilitySlice';
4+
5+
export default combineReducers({
6+
backgroundColor: backgroundColorReducer,
7+
visibility: visibilitySliceReducer,
8+
});

‎src/redux/store.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { configureStore } from '@reduxjs/toolkit';
2+
import {
3+
persistReducer,
4+
FLUSH,
5+
REHYDRATE,
6+
PAUSE,
7+
PERSIST,
8+
PURGE,
9+
REGISTER,
10+
} from 'redux-persist';
11+
import storage from 'redux-persist/lib/storage';
12+
import reducers from './reducers';
13+
14+
const persistConfig = {
15+
key: 'root',
16+
version: 1,
17+
storage,
18+
blacklist: ['visibility'],
19+
whitelist: ['backgroundColor'],
20+
};
21+
22+
const persistedReducer = persistReducer(persistConfig, reducers);
23+
24+
export default configureStore({
25+
reducer: persistedReducer,
26+
middleware: (getDefaultMiddleware) =>
27+
getDefaultMiddleware({
28+
serializableCheck: {
29+
ignoreActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
30+
},
31+
}),
32+
});

‎yarn.lock‎

Lines changed: 76 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -999,7 +999,7 @@
999999
core-js-pure "^3.20.2"
10001000
regenerator-runtime "^0.13.4"
10011001

1002-
"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
1002+
"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
10031003
version "7.17.9"
10041004
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
10051005
integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
@@ -1355,6 +1355,16 @@
13551355
resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
13561356
integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
13571357

1358+
"@reduxjs/toolkit@^1.8.1":
1359+
version "1.8.1"
1360+
resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.8.1.tgz#94ee1981b8cf9227cda40163a04704a9544c9a9f"
1361+
integrity sha512-Q6mzbTpO9nOYRnkwpDlFOAbQnd3g7zj7CtHAZWz5SzE5lcV97Tf8f3SzOO8BoPOMYBFgfZaqTUZqgGu+a0+Fng==
1362+
dependencies:
1363+
immer "^9.0.7"
1364+
redux "^4.1.2"
1365+
redux-thunk "^2.4.1"
1366+
reselect "^4.1.5"
1367+
13581368
"@sinclair/typebox@^0.23.3":
13591369
version "0.23.5"
13601370
resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.23.5.tgz#93f7b9f4e3285a7a9ade7557d9a8d36809cbc47d"
@@ -1532,6 +1542,14 @@
15321542
dependencies:
15331543
"@types/node" "*"
15341544

1545+
"@types/hoist-non-react-statics@^3.3.1":
1546+
version "3.3.1"
1547+
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
1548+
integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
1549+
dependencies:
1550+
"@types/react" "*"
1551+
hoist-non-react-statics "^3.3.0"
1552+
15351553
"@types/html-minifier-terser@^6.0.0":
15361554
version "6.1.0"
15371555
resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -1690,6 +1708,11 @@
16901708
resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"
16911709
integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
16921710

1711+
"@types/use-sync-external-store@^0.0.3":
1712+
version "0.0.3"
1713+
resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
1714+
integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
1715+
16931716
"@types/ws@^8.5.1":
16941717
version "8.5.3"
16951718
resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
@@ -3686,6 +3709,13 @@ history@^5.2.0:
36863709
dependencies:
36873710
"@babel/runtime" "^7.7.6"
36883711

3712+
hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
3713+
version "3.3.2"
3714+
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
3715+
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
3716+
dependencies:
3717+
react-is "^16.7.0"
3718+
36893719
hpack.js@^2.1.6:
36903720
version "2.1.6"
36913721
resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
@@ -3856,6 +3886,11 @@ ignore@^4.0.6:
38563886
resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
38573887
integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
38583888

3889+
immer@^9.0.7:
3890+
version "9.0.14"
3891+
resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.14.tgz#e05b83b63999d26382bb71676c9d827831248a48"
3892+
integrity sha512-ubBeqQutOSLIFCUBN03jGeOS6a3DoYlSYwYJTa+gSKEZKU5redJIqkIdZ3JVv/4RZpfcXdAWH5zCNLWPRv2WDw==
3893+
38593894
immutable@^4.0.0:
38603895
version "4.0.0"
38613896
resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
@@ -5470,7 +5505,7 @@ react-dom@^18.1.0:
54705505
loose-envify "^1.1.0"
54715506
scheduler "^0.22.0"
54725507

5473-
react-is@^16.13.1:
5508+
react-is@^16.13.1, react-is@^16.7.0:
54745509
version "16.13.1"
54755510
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
54765511
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -5485,6 +5520,18 @@ react-is@^18.0.0:
54855520
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
54865521
integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
54875522

5523+
react-redux@^8.0.1:
5524+
version "8.0.1"
5525+
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.1.tgz#2bc029f5ada9b443107914c373a2750f6bc0f40c"
5526+
integrity sha512-LMZMsPY4DYdZfLJgd7i79n5Kps5N9XVLCJJeWAaPYTV+Eah2zTuBjTxKtNEbjiyitbq80/eIkm55CYSLqAub3w==
5527+
dependencies:
5528+
"@babel/runtime" "^7.12.1"
5529+
"@types/hoist-non-react-statics" "^3.3.1"
5530+
"@types/use-sync-external-store" "^0.0.3"
5531+
hoist-non-react-statics "^3.3.2"
5532+
react-is "^18.0.0"
5533+
use-sync-external-store "^1.0.0"
5534+
54885535
react-router-dom@^6.3.0:
54895536
version "6.3.0"
54905537
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d"
@@ -5551,6 +5598,23 @@ redent@^3.0.0:
55515598
indent-string "^4.0.0"
55525599
strip-indent "^3.0.0"
55535600

5601+
redux-persist@^6.0.0:
5602+
version "6.0.0"
5603+
resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
5604+
integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==
5605+
5606+
redux-thunk@^2.4.1:
5607+
version "2.4.1"
5608+
resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714"
5609+
integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==
5610+
5611+
redux@^4.1.2, redux@^4.2.0:
5612+
version "4.2.0"
5613+
resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
5614+
integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
5615+
dependencies:
5616+
"@babel/runtime" "^7.9.2"
5617+
55545618
regenerate-unicode-properties@^10.0.1:
55555619
version "10.0.1"
55565620
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56"
@@ -5644,6 +5708,11 @@ requires-port@^1.0.0:
56445708
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
56455709
integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
56465710

5711+
reselect@^4.1.5:
5712+
version "4.1.5"
5713+
resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.5.tgz#852c361247198da6756d07d9296c2b51eddb79f6"
5714+
integrity sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ==
5715+
56475716
resolve-cwd@^3.0.0:
56485717
version "3.0.0"
56495718
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -6438,6 +6507,11 @@ url-loader@^4.1.1:
64386507
mime-types "^2.1.27"
64396508
schema-utils "^3.0.0"
64406509

6510+
use-sync-external-store@^1.0.0:
6511+
version "1.1.0"
6512+
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz#3343c3fe7f7e404db70f8c687adf5c1652d34e82"
6513+
integrity sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==
6514+
64416515
util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
64426516
version "1.0.2"
64436517
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"

0 commit comments

Comments
 (0)