Added Material and simple functional stepper

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",

src/App.tsx

@@ -1,24 +1,27 @@
 import React from "react";
 import "./App.css";
-
 import { Provider } from "react-redux";
 import { createStore, Reducer, Action } from "redux";
 import GlobalState, { initialState } from "./state/globalState";
-
 import Header from "./styledComponents/Header";
 import Central from "./styledComponents/Central";
 import Footer from "./styledComponents/Footer";
 import Carousel from "./styledComponents/Carousel";
+import { CentralActions, StepAction } from "./actions/CentralActions";
 
-const reducer: Reducer<GlobalState, Action> = (
+const reducer: Reducer<GlobalState, StepAction> = (
   state: GlobalState = initialState,
-  action: Action
+  action: StepAction
 ) => {
+  if (action.type === CentralActions.CHANGE_STEP) {
+    return { ...state, current: action.payload };
+  }
   return state;
 };
 const store = createStore(reducer, initialState);
 
 function App() {
+  console.log(store.getState());
   return (
     <Provider store={store}>
       <div id="contenedor">

src/actions/CentralActions.ts

@@ -0,0 +1,9 @@
+import { Action } from "redux";
+
+export enum CentralActions {
+  CHANGE_STEP = "CHANGE_STEP",
+}
+
+export interface StepAction extends Action {
+  payload: number;
+}