first commit

package-lock.json

@@ -2408,6 +2408,15 @@
         "redux": "^4.0.0"
       }
     },
+    "@types/redux-logger": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/redux-logger/-/redux-logger-3.0.9.tgz",
+      "integrity": "sha512-cwYhVbYNgH01aepeMwhd0ABX6fhVB2rcQ9m80u8Fl50ZODhsZ8RhQArnLTkE7/Zrfq4Sz/taNoF7DQy9pCZSKg==",
+      "dev": true,
+      "requires": {
+        "redux": "^4.0.0"
+      }
+    },
     "@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -5006,6 +5015,11 @@
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
       "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw="
     },
+    "deep-diff": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
+      "integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ="
+    },
     "deep-equal": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
@@ -12931,6 +12945,14 @@
       "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz",
       "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A=="
     },
+    "redux-logger": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
+      "integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=",
+      "requires": {
+        "deep-diff": "^0.3.5"
+      }
+    },
     "redux-thunk": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "react-redux": "7.2.6",
     "react-scripts": "4.0.3",
     "redux-devtools-extension": "^2.13.9",
+    "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.0",
     "typescript": "^4.4.4",
     "web-vitals": "^1.1.2"
@@ -43,5 +44,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/redux-logger": "^3.0.9"
   }
 }

src/App.tsx

@@ -1,49 +1,20 @@
-import * as React from 'react';
-import { connect } from 'react-redux';
-import { AppState } from './store';
-
-import { CounterState } from './store/counter/types';
-import { increment, decrement, reset } from './store/counter/actions';
-
-import Counter from './components/Counter';
-
-interface AppProps {
-  counter: CounterState;
-  increment: typeof increment;
-  decrement: typeof decrement;
-  reset: typeof reset;
-}
-
-class App extends React.Component<AppProps> {
-  increment = () => {
-    this.props.increment();
-  };
-
-  decrement = () => {
-    this.props.decrement();
-  };
-
-  reset = () => {
-    this.props.reset();
-  };
-
-  render() {
-    return (
-      <Counter
-        value={this.props.counter.value}
-        onIncrement={this.increment}
-        onDecrement={this.decrement}
-        onReset={this.reset}
-      />
-    );
-  }
+import {useDispatch, useSelector} from "react-redux";
+import {CounterTypes} from "./reducers/types";
+import "./index.sass";
+import { RootState } from "./reducers";
+
+function App() {
+    const dispatch = useDispatch();
+    const value = useSelector((state:RootState) => state.counter);
+
+    return(
+        <>
+            <h2> Counter: {value}</h2>
+            <button className="btn_click" onClick={() => dispatch({type: CounterTypes.ACTION_TYPE_INCREMENT})}>+</button>
+            <button className="btn_click" onClick={() => dispatch({type: CounterTypes.ACTION_TYPE_DECREMENT})}>-</button>
+        </>
+    )
 }
 
-const mapStateToProps = (state: AppState) => ({
-  counter: state.counter
-});
+export default App;
 
-export default connect(
-  mapStateToProps,
-  { increment, decrement, reset }
-)(App);

src/components/Counter.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react';
-
-interface CounterInterfaceProps {
-  value: number;
-  onIncrement: () => void;
-  onDecrement: () => void;
-  onReset: () => void;
-}
-
-const Counter: React.SFC<CounterInterfaceProps> = ({
-  value,
-  onIncrement,
-  onDecrement,
-  onReset
-}) => {
-  return (
-    <div>
-      <div className='counter_text'>Счетчик: {value}</div>
-      <div>
-        <button className='btn_click' onClick={onIncrement}>Добавить</button>
-        <button className='btn_click' onClick={onDecrement}>Удалить</button>
-        <button className='btn_click' onClick={onReset}>Обнулить</button>
-      </div>
-    </div>
-  );
-};
-
-export default Counter;

src/index.tsx

@@ -1,23 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
+import ReactDOM from "react-dom";
+import App from "./App";
+import { Provider } from "react-redux";
+import {createStore} from "redux";
+import { counterReducer } from "./reducers/reducer";
 
-import App from './App';
-import './index.sass';
-import configureStore from './store';
-
-import * as serviceWorker from './serviceWorker';
-
-const store = configureStore();
+const store = createStore(counterReducer);
 
 ReactDOM.render(
-  <Provider store={store}>
-    <App />
-  </Provider>,
-  document.getElementById('root')
-);
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
+    <Provider store={store}>
+        <App />
+    </Provider>,
+    document.getElementById("root")
+);

src/reducers/index.ts

@@ -0,0 +1,8 @@
+import {combineReducers} from "redux";
+import {counterReducer} from "./reducer";
+
+export const rootReducer = combineReducers({
+    counter: counterReducer,
+})
+
+export type RootState = ReturnType<typeof rootReducer>

src/reducers/reducer.ts

@@ -0,0 +1,18 @@
+import { CounterState as State, CounterTypes } from "./types";
+
+const initialState = {
+    value: 0
+}
+
+export const counterReducer = (state: State = initialState, action: any) => {
+    switch (action.type) {
+        case CounterTypes.ACTION_TYPE_INCREMENT:
+            return {value: state.value + 1}
+    
+        case CounterTypes.ACTION_TYPE_DECREMENT:
+            return {value: state.value -1}
+            
+        default:
+            return state
+    }
+};

src/reducers/types.ts

@@ -0,0 +1,11 @@
+export type CounterState = {
+    value: number
+}
+
+export enum CounterTypes {
+    ACTION_TYPE_INCREMENT = "counter|actionTypeIncrement",
+    ACTION_TYPE_DECREMENT = "counter|actionTypeDecrement",
+    COUNTER__START = "counter|counter:start",
+    COUNTER__SUCCESS = "counter|counter:success",
+    COUNTER__FAILURE = "counter|counter:failue",
+}

src/store/counter/actions.ts

@@ -1,19 +0,0 @@
-import { INCREMENT, DECREMENT, RESET } from './types';
-
-export const increment = () => {
-  return {
-    type: INCREMENT
-  };
-};
-
-export const decrement = () => {
-  return {
-    type: DECREMENT
-  };
-};
-
-export const reset = () => {
-  return {
-    type: RESET
-  };
-};

src/store/counter/reducers.ts

@@ -1,33 +0,0 @@
-import {
-  CounterState,
-  INCREMENT,
-  DECREMENT,
-  RESET,
-  CounterActionTypes
-} from './types';
-
-const initialState: CounterState = {
-  value: 0
-};
-
-export function counterReducer(
-  state = initialState,
-  action: CounterActionTypes
-): CounterState {
-  switch (action.type) {
-    case INCREMENT:
-      return {
-        ...state,
-        value: state.value + 1
-      };
-    case DECREMENT:
-      return {
-        ...state,
-        value: state.value - 1
-      };
-    case RESET:
-      return initialState;
-    default:
-      return state;
-  }
-}

src/store/counter/types.ts

@@ -1,24 +0,0 @@
-export interface CounterState {
-  value: number;
-}
-
-export const INCREMENT = 'INCREMENT';
-export const DECREMENT = 'DECREMENT';
-export const RESET = 'RESET';
-
-interface IncrementAction {
-  type: typeof INCREMENT;
-}
-
-interface DecrementAction {
-  type: typeof DECREMENT;
-}
-
-interface ResetAction {
-  type: typeof RESET;
-}
-
-export type CounterActionTypes =
-  | IncrementAction
-  | DecrementAction
-  | ResetAction;

src/store/index.ts

@@ -1,24 +0,0 @@
-import { createStore, combineReducers, applyMiddleware } from 'redux';
-import thunkMiddleware from 'redux-thunk';
-import { composeWithDevTools } from 'redux-devtools-extension';
-
-import { counterReducer } from './counter/reducers';
-
-const rootReducer = combineReducers({
-  counter: counterReducer
-});
-
-export type AppState = ReturnType<typeof rootReducer>;
-
-export default function configureStore() {
-  const middlewares = [thunkMiddleware];
-
-  const middleWareEnhancer = applyMiddleware(...middlewares);
-
-  const store = createStore(
-    rootReducer,
-    composeWithDevTools(middleWareEnhancer)
-  );
-
-  return store;
-}