adding selectors

Author: Ayush Krishnatray

package-lock.json

@@ -35,7 +35,8 @@
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
     "redux": "^4.0.5",
-    "redux-saga": "^1.1.3"
+    "redux-saga": "^1.1.3",
+    "reselect": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.3",

package.json

@@ -1,16 +1,11 @@
-/** eslint-disable */
 import { connect } from 'react-redux';
-// import { createStructuredSelector } from 'reselect';
+import { createStructuredSelector } from 'reselect';
 import { onChange } from './actions';
 import TestComponent from '../../components/TestComponent/TestComponent';
-// import { valueData } from './selectors';
+import { valueData } from './selectors';
 
-// const mapStateToProps = createStructuredSelector({
-//   value: valueData,
-// });
-
-const mapStateToProps = (state) => ({
-  value: (state.value && state.value.data) || ''
+const mapStateToProps = createStructuredSelector({
+  value: valueData
 });
 
 const mapDispatchToProps = (dispatch) => ({

src/containers/TestComponent/TestComponent.jsx

@@ -0,0 +1 @@
+export const valueData = state => (state.value && state.value.data) || '';

src/containers/TestComponent/selectors.js

@@ -9,7 +9,7 @@ import TestComponent from '../TestComponent';
 describe('TestComponent Test Suite', () => {
   const state = {
     value: {},
-    onChange: jest.fn(),
+    onChange: jest.fn()
   };
   const mockStore = configureMockStore();
   const store = mockStore(state);

src/containers/TestComponent/test/TestComponent.test.js

@@ -6,7 +6,7 @@ describe('actions', () => {
     const data = 'Finish docs';
     const expectedAction = {
       type: ON_CHANGE,
-      data,
+      data
     };
     expect(onChange(data)).toEqual(expectedAction);
   });

src/containers/TestComponent/test/actions.test.js

@@ -2,7 +2,7 @@ import reducer from '../reducer';
 import { ON_CHANGE } from '../constants';
 
 const state = {
-  data: '',
+  data: ''
 };
 
 describe('todos reducer', () => {
@@ -15,7 +15,7 @@ describe('todos reducer', () => {
     expect(
       reducer(state, {
         type: ON_CHANGE,
-        data,
+        data
       }),
     ).toEqual({ data });
   });

src/containers/TestComponent/test/reducer.test.js

@@ -20,9 +20,13 @@ module.exports = {
         test: /\.(js|jsx)$/,
         use: ['babel-loader']
       },
+      // node-sass provides binding for Node.js to LibSass, a Sass compiler.
+      // sass-loader is a loader for Webpack for compiling SCSS/Sass files.
+      // style-loader injects our styles into our DOM.
+      // css-loader interprets @import and @url() and resolves them.
+      // mini-css-extract-plugin extracts our CSS out of the JavaScript bundle into a separate file, essential for production builds.
       {
         test: /\.s(a|c)ss$/,
-        exclude: /\.module.(s(a|c)ss)$/,
         loader: [
           isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
           {