reduxing

package.json

@@ -16,5 +16,17 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

src/App.tsx

@@ -5,11 +5,11 @@ import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import Link from '@material-ui/core/Link';
 import ProTip from './ProTip';
-import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemText from "@material-ui/core/ListItemText";
-import {Grid} from "@material-ui/core";
 
+import {Grid} from "@material-ui/core";
+import store from "./store";
+import {MainAsideMenu} from "./component/MainAsideMenu";
+import { Provider } from "react-redux";
 
 function MadeWithLove() {
   return (
@@ -23,26 +23,19 @@ function MadeWithLove() {
   );
 }
 
-export interface HelloProps { selectedIndex?: number}
 
-export class App extends React.Component<HelloProps, {}> {
-  state = {
-    selectedIndex: 0
-  };
+
+
+
+export class App extends React.Component<{}, {}> {
   render() {
-    const {selectedIndex} = this.state;
     return (
+        <Provider store={store}>
       <Container maxWidth="xl">
         <Grid container direction="row" justify="flex-start" alignItems="stretch">
           <Box my={4}>
-            <List>
-              {['Profile', 'Constants'].map((text, index) => (
-                <ListItem button selected={(selectedIndex === index)} key={text}
-                          onClick={() => this.setState({selectedIndex: index})}>
-                  <ListItemText color={index % 2 ? "primary" : "secondary"} primary={text}/>
-                </ListItem>
-              ))}
-            </List>
+            <MainAsideMenu/>
+
           </Box>
           <Box my={4}>
             <Typography variant="h4" component="h1" gutterBottom>
@@ -57,6 +50,7 @@ export class App extends React.Component<HelloProps, {}> {
           </Box>
         </Grid>
       </Container>
+        </Provider>
     );
   }
 };

src/action-reducers/addLocale.ts

+import {Action, IMainStorage} from './index';
+
+export interface IAddLocale {
+    payload: {key: string, value: string}
+}
+
+
+export const addLocale = Action('ADD_LOCALE', function (state: IMainStorage, {payload}: IAddLocale) {
+    return {...state, locale: {...state.locale, [payload.key]: [payload.value]}}
+});
\ No newline at end of file

src/action-reducers/index.ts

+// src/js/reducers/index.js
+import {mainMenu} from "../model/mainMenu";
+
+export interface IMainStorage {
+    activeMenu: string,
+    locale: {
+        //string: string
+    },
+    chatData: {
+
+    }
+}
+const initialState: IMainStorage = {
+    activeMenu: mainMenu.filter((el)=>el.active)[0].id,
+    locale: {
+
+    },
+    chatData: {
+
+    }
+};
+
+const reducers: any = {};
+
+export const Action = function (type: string, reducer: Function<IMainStorage,IAction>) {
+    reducers[type] = reducer;
+    return function(payload: any){
+        return {type, payload};
+    }
+};
+
+export interface IAction {
+    type: string,
+    payload: any
+};
+
+function rootReducer(state:IMainStorage = initialState, action: IAction) {
+    if(action.type in reducers){
+        reducers[action.type](state, action)
+    }else{
+        throw new Error('No reducer for type `'+ action.type +'`')
+    }
+    return state;
+}
+
+export default rootReducer;
\ No newline at end of file

src/action-reducers/setActiveMenu.ts

+import {Action} from './index';
+
+export const setActiveMenu = Action('SET_ACTIVE_MENU', function (state, {payload}) {
+    return {...state, activeMenu: payload.item};
+});
\ No newline at end of file

src/component/MainAsideMenu.tsx

+import React from "react";
+import {setActiveMenu} from "../action-reducers/setActiveMenu";
+import {List, ListItem, ListItemText} from "@material-ui/core";
+import {mainMenu} from "../model/mainMenu";
+
+export class MainAsideMenu extends React.Component<{}, {}> {
+    render(): React.ReactNode {
+        const {activeMenu} = this.state;
+
+        return <List>
+            {mainMenu.map((item) => (
+                <ListItem button selected={(activeMenu === item.id)} key={item.id} onClick={() => setActiveMenu(item.id)}>
+                <ListItemText color={(activeMenu === item.id) ? "primary" : "secondary"} primary={item.text}/>
+                </ListItem>
+            ))}
+        </List>;
+    }
+}
\ No newline at end of file

src/model/mainMenu.ts

+export interface menuItem {
+    id: string,
+    text: string,
+    active ?: boolean
+}
+
+export const mainMenu: menuItem[] = [
+    {
+        id: 'profile',
+        text: 'Profile',
+        active: true
+    },
+    {
+        id: 'constants',
+        text: 'Constants'
+    }];
\ No newline at end of file

src/store.ts

+import { createStore } from "redux";
+import rootReducer from "./action-reducers/index";
+const store = createStore(rootReducer);
+export default store;
\ No newline at end of file