dispatch function added to state

hipstagram/src/App.js

@@ -10,33 +10,32 @@ import Profile from "./Content/Profile/profile";
 import Settings from "./Content/Settings/settings";
 
 function App(props) {
-  return (
-    <div className="app-wrapper">
-      <Header />
+    return (
+        <div className="app-wrapper">
+            <Header />
 
-      <div className="content-block">
-        <Navigation />
+            <div className="content-block">
+                <Navigation />
 
-        <div className="app-wrapper-content">
-          <Redirect exact from="/" to="/profile" />
-          <Route
-            path="/profile"
-            render={() => <Profile profilePage={props.state.profilePage} 
-            addPost={ props.addPost } 
-            updateNewPostText={ props.updateNewPostText }
-            />}
-          />
-          <Route
-            path="/messages"
-            render={() => <Messages state={props.state.messagesPage} />}
-          />
-          <Route path="/news" component={News} />
-          <Route path="/music" component={Music} />
-          <Route path="/settings" component={Settings} />
+                <div className="app-wrapper-content">
+                    <Redirect exact from="/" to="/profile" />
+                    <Route
+                        path="/profile"
+                        render={() => <Profile profilePage={props.state.profilePage}
+                            dispatch={props.dispatch}
+                        />}
+                    />
+                    <Route
+                        path="/messages"
+                        render={() => <Messages state={props.state.messagesPage} />}
+                    />
+                    <Route path="/news" component={News} />
+                    <Route path="/music" component={Music} />
+                    <Route path="/settings" component={Settings} />
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  );
+    );
 }
 
 export default App;

hipstagram/src/Content/Profile/My posts/my posts.js

@@ -9,12 +9,13 @@ function MyPosts(props) {
     let newPostElement = React.createRef();
 
     let addPost = () => {
-        props.addPost();
+        props.dispatch({ type: 'ADD-POST'});
     }
 
     let onPostChange = () => {
         let text = newPostElement.current.value;
-        props.updateNewPostText(text);
+        let action = ({ type: 'UPDATE-NEW-POST-TEXT', newText: text});
+        props.dispatch(action);
     }
 
     return(

hipstagram/src/Content/Profile/profile.js

@@ -11,8 +11,7 @@ function Profile(props) {
                 <ProfileInfo />
                 <MyPosts post={ props.profilePage.post }
                     newPostText={ props.profilePage.newPostText } 
-                    updateNewPostText={ props.updateNewPostText }
-                    addPost={ props.addPost }
+                    dispatch={ props.dispatch }
                 />
             </div>
        </div>

hipstagram/src/Redux/state.js

@@ -27,26 +27,24 @@ let store = {
     getState() {
         return this._state;
     },
-    _callSubscriber() {
-        console.log("State is changed");
-    },
-    addPost() {
-        let newPost = {
-            id: 5,
-            message: this._state.profilePage.newPostText,
-            likesCount: 0,
-        };
-        this._state.profilePage.post.push(newPost);
-        this._state.profilePage.newPostText = "";
-        this._callSubscriber(this._state);
-    },
-    updateNewPostText(newText) {
-        this._state.profilePage.newPostText = newText;
-        this._callSubscriber(this._state);
-    },
     subscribe(observer) {
         this._callSubscriber = observer;
     },
+    dispatch(action) {
+        if (action.type === 'ADD-POST') {
+            let newPost = {
+                id: 5,
+                message: this._state.profilePage.newPostText,
+                likesCount: 0,
+            };
+            this._state.profilePage.post.push(newPost);
+            this._state.profilePage.newPostText = "";
+            this._callSubscriber(this._state);
+        } else if(action.type === 'UPDATE-NEW-POST-TEXT') {
+            this._state.profilePage.newPostText = action.newText;
+            this._callSubscriber(this._state);
+        }
+    }
 };
 
 export default store;

hipstagram/src/index.js

@@ -10,7 +10,7 @@ let rerenderEntireTree = (state) => {
     ReactDOM.render(
         <React.StrictMode>
             <BrowserRouter>
-                <App state={ state } addPost={ store.addPost.bind(store) } updateNewPostText={ store.updateNewPostText.bind(store) } />
+                <App state={ state } dispatch={ store.dispatch.bind(store) } />
             </BrowserRouter>
         </React.StrictMode>,
         document.getElementById("root")