Organized Folder Structure, and Added Redux-Logger

package.json

@@ -18,6 +18,7 @@
     "redux",
     "react-redux",
     "react-router",
+    "redux-logger",
     "react-router-dom",
     "typescript",
     "prettier"
@@ -64,6 +65,7 @@
     "react-scripts": "4.0.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
+    "redux-logger": "^3.0.6",
     "redux-mock-store": "^1.5.4",
     "typescript": "~4.0.3"
   },
@@ -110,6 +112,7 @@
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "9.0.0",
     "@semantic-release/github": "7.2.0",
+    "@types/redux-logger": "^3.0.8",
     "codecov": "3.8.1",
     "commitizen": "4.2.2",
     "cypress": "5.4.0",

src/components/counter/Counter.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
-import { actionTypes, selectors } from '../../features/counter'
+import { actionTypes, selectors } from '../../redux/counter'
 
 const Counter: React.FC = () => {
   const count = useSelector(selectors.getCountValue)

src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
-import store from './store'
+import store from './redux/store'
 
 import './index.css'
 

src/redux/store.ts

@@ -0,0 +1,21 @@
+import { applyMiddleware, combineReducers, compose, createStore } from 'redux'
+import { devToolsEnhancer } from 'redux-devtools-extension'
+import logger from 'redux-logger'
+import { CounterReducer } from './counter'
+
+/* Create root reducer, containing all features of the application */
+const rootReducer = combineReducers({
+    count: CounterReducer,
+})
+
+
+const store = createStore(
+    rootReducer,
+    compose(
+        applyMiddleware(logger),
+
+        /* preloadedState, */ devToolsEnhancer({})
+    )
+) 
+
+export default store

template/src/components/counter/Counter.spec.tsx

@@ -3,7 +3,7 @@ import { Provider } from 'react-redux'
 import { mount } from 'enzyme'
 import configureStore from 'redux-mock-store'
 
-import { actionTypes } from '../../features/counter'
+import { actionTypes } from '../../redux/counter'
 import Counter from './Counter'
 
 describe('Counter', () => {

template/src/components/counter/Counter.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
-import { actionTypes, selectors } from '../../features/counter'
+import { actionTypes, selectors } from '../../redux/counter'
 
 const Counter: React.FC = () => {
   const count = useSelector(selectors.getCountValue)

template/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
-import store from './store'
+import store from './redux/store'
 
 import './index.css'
 

template/src/redux/store.ts

@@ -0,0 +1,21 @@
+import { applyMiddleware, combineReducers, compose, createStore } from 'redux'
+import { devToolsEnhancer } from 'redux-devtools-extension'
+import logger from 'redux-logger'
+import { CounterReducer } from './counter'
+
+/* Create root reducer, containing all features of the application */
+const rootReducer = combineReducers({
+    count: CounterReducer,
+})
+
+
+const store = createStore(
+    rootReducer,
+    compose(
+        applyMiddleware(logger),
+
+        /* preloadedState, */ devToolsEnhancer({})
+    )
+)
+
+export default store