Create state management POC

src/App.tsx

@@ -1,26 +1,29 @@
 import React from "react";
-import logo from "./logo.svg";
 import "./App.scss";
+import { useGlobalState } from "./state/useGlobalState";
+import { UpdateUserName, UpdateUserAge } from "./state/user/UserActions";
 
 function App() {
+  const {state, dispatch} = useGlobalState();
+
+  const updateName = () => {
+    dispatch(new UpdateUserName('Emanuel'))
+  }
+
+  const updateAge = () => {
+    dispatch(new UpdateUserAge(30))
+  }
+
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+     <button onClick={updateName}>set name to Emanuel</button>
+     <button onClick={updateAge}>set age to 30</button><br /><br />
+     Current name: <b>{state.user.name}</b><br />
+     Current age: <b>{state.user.age}</b>
     </div>
   );
 }
 
 export default App;
+

src/index.tsx

@@ -3,11 +3,16 @@ import ReactDOM from "react-dom";
 import "./index.scss";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
+import { Provider } from "./state/Provider";
+
+
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+    <React.StrictMode>
+      <Provider>
+        <App />
+      </Provider>
+    </React.StrictMode>,
   document.getElementById("root")
 );
 

src/state/Action.ts

@@ -0,0 +1,3 @@
+export interface Action {
+    readonly type: string;
+}

src/state/Context.ts

@@ -0,0 +1,12 @@
+import React, { createContext } from 'react';
+import { State, initialState } from './State';
+import { Action } from './Action';
+
+
+
+const initialContext: { state: State; dispatch: React.Dispatch<Action> } = {
+  state: initialState,
+  dispatch: () => {}
+};
+
+export const Context = createContext(initialContext);

src/state/Provider.tsx

@@ -0,0 +1,10 @@
+
+import React, { useReducer } from 'react';
+import { Context } from './Context';
+import { initialState } from './State';
+import { reducer } from './Reducer';
+
+export function Provider({ children }: any) {
+    const [state, dispatch] = useReducer(reducer, initialState);
+    return <Context.Provider value={{ state, dispatch }}>{children}</Context.Provider>;
+  }

src/state/Reducer.ts

@@ -0,0 +1,19 @@
+import { UserReducer } from "./user/UserReducer";
+import { State } from "./State";
+
+export const combineReducers = <T>(reducers: {[P in keyof T]: any}) =>  {
+  const reducerEntries = Object.entries<any>(reducers) as [keyof T, any][];
+    return (state: T, action: any) => {
+      const nextState = {} as T;
+          for(const [key, reducer] of reducerEntries){
+            const previousStateForKey = state[key];
+            const nextStateForKey = reducer(previousStateForKey, action)
+            nextState[key] = nextStateForKey;
+          }
+      return nextState;
+    }
+}
+
+  export const reducer = combineReducers<State>({
+      user: UserReducer,
+  })

src/state/State.ts

@@ -0,0 +1,9 @@
+import { UserState, initialUserState } from "./user/UserState";
+
+export interface State {
+    user: UserState
+}
+
+export const initialState: State = {
+    user: initialUserState
+}

src/state/useGlobalState.ts

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { Context } from './Context';
+
+
+export const useGlobalState = () => useContext(Context);

src/state/user/UserActions.ts

@@ -0,0 +1,22 @@
+import { Action } from "../Action";
+
+export enum UserActionTypes {
+    UpdateUserName = "[User] Update User name",
+    UpdateUserAge = "[User] Update User age"
+
+}
+
+
+
+export class UpdateUserAge implements Action{
+    public readonly type =  UserActionTypes.UpdateUserAge;
+    constructor(public age: number) { }
+}
+
+export class UpdateUserName implements Action{
+    public readonly type =  UserActionTypes.UpdateUserName;
+    constructor(public name: string) { }
+}
+
+
+export type UserActions = UpdateUserName | UpdateUserAge;

src/state/user/UserReducer.ts

@@ -0,0 +1,20 @@
+import { UserActionTypes, UserActions } from "./UserActions";
+import { UserState } from "./UserState";
+
+export const UserReducer = (state: UserState, action: UserActions) => {
+    switch (action.type) {
+      case UserActionTypes.UpdateUserAge:
+        return {
+            ...state, 
+          age: action.age
+        };
+      case UserActionTypes.UpdateUserName:
+        return {
+            ...state,
+          name: action.name
+        };
+      default:
+        return state;
+    }
+  };
+

src/state/user/UserState.ts

@@ -0,0 +1,10 @@
+export type UserState = {
+    age: number;
+    name: string;
+  };
+
+  export const initialUserState: UserState = {
+      age: 12,
+      name: "Initial name"
+    }
+