Add middlewares

README.md

@@ -168,3 +168,10 @@ React Patterns
 
 [Pull request](https://github.com/nickovchinnikov/react-js-tutorial/pull/28) <br>
 [Presentation](https://docs.google.com/presentation/d/1cjlHeq53IoWMmQFYSrzmOgiqS6TIEeRIrbCxZ7GjXVc/edit?usp=sharing) <br>
+
+## Lesson 17
+* Redux middlewares
+
+[Pull request](https://github.com/nickovchinnikov/react-js-tutorial/pull/34) <br>
+[Homework](https://github.com/nickovchinnikov/react-js-tutorial/pull/35) <br>
+[Presentation](https://otus-lesson-react-middlewares.now.sh/) <br>

package.json

@@ -55,6 +55,7 @@
     "@types/react-router-dom": "^5.1.5",
     "@types/react-test-renderer": "^16.9.2",
     "@types/redux-mock-store": "^1.0.2",
+    "@types/redux-logger": "^3.0.8",
     "@typescript-eslint/eslint-plugin": "^2.25.0",
     "@typescript-eslint/parser": "^2.25.0",
     "babel-jest": "^25.2.4",
@@ -76,6 +77,7 @@
     "prettier": "^2.0.2",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-test-renderer": "^16.13.1",
+    "redux-logger": "^3.0.6",
     "redux-mock-store": "^1.5.4",
     "storybook-addon-react-docgen": "^1.2.32",
     "ts-node": "^8.8.2",
@@ -94,7 +96,8 @@
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
-    "redux": "^4.0.5"
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
   },
   "loki": {
     "configurations": {

src/rdx/actions.ts

@@ -1,5 +1,9 @@
 import { createAction } from "@reduxjs/toolkit";
 export type Coordinates = { x: number; y: number };
 
-export const xMove = createAction<Coordinates>("xMove");
+export const xMove = createAction("xMove", (payload: Coordinates) => ({
+  payload,
+  meta: { delay: 500 },
+}));
+
 export const oMove = createAction<Coordinates>("oMove");

src/rdx/delayMiddleware.ts

@@ -0,0 +1,15 @@
+import { Middleware } from "redux";
+
+export const delayMiddleware: Middleware = () => (next) => (action) => {
+  if (
+    "meta" in action &&
+    "delay" in action.meta &&
+    typeof action.meta.delay === "number"
+  ) {
+    const timeout = setTimeout(() => next(action), action.meta.delay);
+
+    return () => clearTimeout(timeout);
+  }
+
+  return next(action);
+};

src/rdx/store.ts

@@ -1,6 +1,18 @@
-import { reducer } from "./reducer";
 import { configureStore } from "@reduxjs/toolkit";
+import thunkMiddleware from "redux-thunk";
+import { reducer } from "./reducer";
+import { delayMiddleware } from "./delayMiddleware";
+
+const middleware = [thunkMiddleware, delayMiddleware];
+
+if (process.env.NODE_ENV === `development`) {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const { logger } = require(`redux-logger`);
+
+  middleware.push(logger);
+}
 
 export const store = configureStore({
   reducer,
+  middleware,
 });

src/screens/ReduxScreen.test.tsx

@@ -30,6 +30,9 @@ describe("ReduxScreen with mocked store", () => {
     expect(store.getActions()).toMatchInlineSnapshot(`
       Array [
         Object {
+          "meta": Object {
+            "delay": 500,
+          },
           "payload": Object {
             "x": 100,
             "y": 999,
@@ -86,6 +89,9 @@ describe("ReduxScreen with real store", () => {
       Array [
         Array [
           Object {
+            "meta": Object {
+              "delay": 500,
+            },
             "payload": Object {
               "x": 0,
               "y": 1,