Skip to content

Commit 0737db8

Browse files
boostupboostup
committed
applying Middleware
1 parent 9f83141 commit 0737db8

File tree

5 files changed

+86
-38
lines changed

5 files changed

+86
-38
lines changed

‎public/index.html

+19-20
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7-
<meta name="theme-color" content="#000000">
8-
<!--
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8+
/>
9+
<meta name="theme-color" content="#000000" />
10+
<!--
911
manifest.json provides metadata used when your web app is added to the
1012
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
1113
-->
12-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14-
<!--
14+
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> -->
15+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
16+
<!--
1517
Notice the use of %PUBLIC_URL% in the tags above.
1618
It will be replaced with the URL of the `public` folder during the build.
1719
Only files inside the `public` folder can be referenced from the HTML.
@@ -20,15 +22,13 @@
2022
work correctly both with client-side routing and a non-root public URL.
2123
Learn how to configure a non-root public URL by running `npm run build`.
2224
-->
23-
<title>React App</title>
24-
</head>
25+
<title>React App</title>
26+
</head>
2527

26-
<body>
27-
<noscript>
28-
You need to enable JavaScript to run this app.
29-
</noscript>
30-
<div id="root"></div>
31-
<!--
28+
<body>
29+
<noscript> You need to enable JavaScript to run this app. </noscript>
30+
<div id="root"></div>
31+
<!--
3232
This HTML file is a template.
3333
If you open it directly in the browser, you will see an empty page.
3434
@@ -38,6 +38,5 @@
3838
To begin the development, run `npm start` or `yarn start`.
3939
To create a production bundle, use `npm run build` or `yarn build`.
4040
-->
41-
</body>
42-
43-
</html>
41+
</body>
42+
</html>

‎src/middlewares/demo.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
//Logger : A middleware
2+
export function demo(fn) {
3+
return function (...rest) {
4+
console.log("Demo middleware", rest);
5+
return fn.apply(this, rest);
6+
};
7+
}

‎src/middlewares/logger.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
//Logger : A middleware
2+
export function logger(fn) {
3+
return function (...rest) {
4+
console.group(fn.name);
5+
console.log({
6+
state: rest[0],
7+
action: rest[1],
8+
});
9+
console.groupEnd();
10+
return fn.apply(this, rest);
11+
};
12+
}

‎src/reducers/rootReducers.js

+21-18
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,37 @@
1+
import { logger } from "../middlewares/logger";
2+
import { demo } from "../middlewares/demo";
3+
import { combineReducers, applyMiddelware } from "../utils";
4+
15
import {
26
counter1initialState,
37
counter1Reducers,
48
} from "./counter1/counter1.reducers";
9+
510
import {
611
counter2initialState,
712
counter2Reducers,
813
} from "./counter2/counter2.reducers";
9-
import { uiInitialState, uiReducers } from "./ui/ui.reducers";
1014

11-
function combineReducers(slices) {
12-
return function (prevState, action) {
13-
return Object.keys(slices).reduce((nextState, nextProp) => {
14-
return {
15-
...nextState,
16-
[nextProp]: slices[nextProp](prevState[nextProp], action),
17-
};
18-
}, prevState);
19-
};
20-
}
15+
import { uiInitialState, uiReducers } from "./ui/ui.reducers";
2116

2217
export const allInitialStates = {
2318
counter1: counter1initialState,
2419
counter2: counter2initialState,
2520
ui: uiInitialState,
2621
};
2722

28-
const allReducers = combineReducers({
29-
counter1: counter1Reducers,
30-
counter2: counter2Reducers,
31-
ui: uiReducers,
32-
});
33-
34-
export default allReducers;
23+
export default combineReducers(
24+
applyMiddelware(
25+
//Add reducers here
26+
{
27+
counter1: counter1Reducers,
28+
counter2: counter2Reducers,
29+
ui: uiReducers,
30+
},
31+
[
32+
//Add middlewares here
33+
logger,
34+
// demo,
35+
]
36+
)
37+
);

‎src/utils.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
export function combineReducers(slices) {
2+
return function (prevState, action) {
3+
return Object.keys(slices).reduce((nextState, nextProp) => {
4+
return {
5+
...nextState,
6+
[nextProp]: slices[nextProp](prevState[nextProp], action),
7+
};
8+
}, prevState);
9+
};
10+
}
11+
12+
export function applyMiddelware(slices, middlewares) {
13+
//for each slice
14+
return Object.keys(slices).reduce((nextSlice, sliceName) => {
15+
return {
16+
...nextSlice,
17+
[sliceName]: (function () {
18+
//wrap with middlewares
19+
let reducer = slices[sliceName];
20+
for (let i = 0; i < middlewares.length; i++) {
21+
reducer = middlewares[i](reducer);
22+
}
23+
return reducer;
24+
})(),
25+
};
26+
}, {});
27+
}

0 commit comments

Comments
 (0)