Redux added

hipstagram/package-lock.json

@@ -12531,6 +12531,15 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "redux": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
+      "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -14167,6 +14176,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

hipstagram/package.json

@@ -10,6 +10,7 @@
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
+    "redux": "^4.0.5",
     "web-vitals": "^1.1.0"
   },
   "scripts": {

hipstagram/src/Redux/messages-reducer.js

@@ -1,7 +1,23 @@
 const UPDATE_NEW_MESSAGE_BODY = 'UPDATE-NEW-MESSAGE-BODY';
 const SEND_MESSAGE = 'SEND-MESSAGE';
 
-const messagesReducer = (state, action) => {
+let initialState = {
+    dialogsData: [
+        { id: 1, name: "Oleh" },
+        { id: 2, name: "Victor" },
+        { id: 3, name: "Maria" },
+        { id: 4, name: "Valeriy" },
+        { id: 5, name: "John" },
+    ],
+    messagesData: [
+        { id: 1, message: "Hi" },
+        { id: 2, message: "How is your project?" },
+        { id: 3, message: "Looks not ok" },
+    ],
+    newMessageBody: ""
+}
+
+const messagesReducer = (state = initialState, action) => {
     switch (action.type) {
         case UPDATE_NEW_MESSAGE_BODY:
             state.newMessageBody = action.body;

hipstagram/src/Redux/navbar-reducer.js

@@ -1,4 +1,6 @@
-const navbarReducer = (state, action) => {
+let initialState = {}
+
+const navbarReducer = (state = initialState, action) => {
 
     return state;
 }

hipstagram/src/Redux/profile-reducer.js

@@ -1,7 +1,17 @@
 const ADD_POST = 'ADD-POST';
 const UPDATE_NEW_POST_TEXT = 'UPDATE-NEW-POST-TEXT';
 
-const profileReducer = (state, action) => {
+let initialState = {
+    post: [
+        { id: 1, message: "Hi, how are you?", likesCount: 12 },
+        { id: 2, message: "My first post", likesCount: 9 },
+        { id: 2, message: "Bla Bla Bla", likesCount: 3 },
+        { id: 2, message: "Say you'll haunt me", likesCount: 46 },
+    ],
+    newPostText: "front end",
+}
+
+const profileReducer = (state = initialState, action) => {
     switch (action.type) {
         case ADD_POST:
             let newPost = {

hipstagram/src/Redux/store.js

@@ -0,0 +1,14 @@
+import { combineReducers, createStore } from "redux";
+import messagesReducer from "./messages-reducer";
+import navbarReducer from "./navbar-reducer";
+import profileReducer from "./profile-reducer";
+
+let reducers = combineReducers({
+    profilePage: profileReducer,
+    messagesPage: messagesReducer,
+    navbar: navbarReducer
+});
+
+let store = createStore(reducers);
+
+export default store; 

hipstagram/src/index.js

@@ -1,6 +1,6 @@
 import "./index.css";
 import reportWebVitals from "./reportWebVitals";
-import store from "./Redux/state";
+import store from "./Redux/store";
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
@@ -19,7 +19,10 @@ let rerenderEntireTree = (state) => {
 
 rerenderEntireTree(store.getState());
 
-store.subscribe(rerenderEntireTree);
+store.subscribe(() => {
+    let state = store.getState();
+    rerenderEntireTree(state);
+});
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))