refactor: mentor's review fixes for Dictionary

src/components/Dictionary/Dictionary.tsx

@@ -1,22 +1,26 @@
 import React, { useEffect } from 'react';
-import { connect, ConnectedProps } from 'react-redux';
-import { Typography } from '@material-ui/core';
+import { useDispatch, useSelector } from 'react-redux';
+import { makeStyles, Typography } from '@material-ui/core';
 import Header from '../Header';
 import Footer from '../Footer';
 import { fetchDictionary } from '../../store/actions/dictionaryActions';
 import { ICombinedState, IWord } from '../../store/types';
-import './Dictionary.scss';
+import styles from './styles';
 
-type Props = ConnectedProps<typeof connector>;
+const Dictionary: React.FC = () => {
+  const dictionary = useSelector((state: ICombinedState) => state.dictionary);
+  const dispatch = useDispatch();
+  const classes = makeStyles(() => styles)();
+
+  const getDictionary = () => dispatch(fetchDictionary());
 
-const Dictionary: React.FC<Props> = (props: Props) => {
   useEffect(() => {
-    props.fetchDictionary();
+    getDictionary();
   }, []);
 
   const renderWords = () =>
-    props.dictionary.words.map((word: IWord) => (
-      <Typography className="testClass" key={word.word}>
+    dictionary.words.map((word: IWord) => (
+      <Typography className={classes.text} key={word.word}>
         {word.textMeaningTranslate}
       </Typography>
     ));
@@ -33,14 +37,4 @@ const Dictionary: React.FC<Props> = (props: Props) => {
   );
 };
 
-const mapStateToProps = (state: ICombinedState) => ({
-  dictionary: state.dictionary,
-});
-
-const mapDispatchToProps = (dispatch: any) => ({
-  fetchDictionary: () => dispatch(fetchDictionary()),
-});
-
-const connector = connect(mapStateToProps, mapDispatchToProps);
-
-export default connector(Dictionary);
+export default Dictionary;

src/components/Dictionary/styles.ts

@@ -0,0 +1,7 @@
+const styles = {
+  text: {
+    color: 'rebeccapurple',
+  },
+};
+
+export default styles;

src/store/actions/dictionaryActions.ts

@@ -2,36 +2,27 @@ import { Dispatch } from 'redux';
 import backendUrl from '../../consts';
 import { DictionaryActionTypes, IWord } from '../types';
 
-export function fetchDictionaryStart() {
-  return {
-    type: DictionaryActionTypes.FETCH_START,
-  };
-}
+export const fetchDictionaryStart = () => ({
+  type: DictionaryActionTypes.FETCH_START,
+});
 
-export function fetchDictionarySuccess(words: IWord[]) {
-  return {
-    type: DictionaryActionTypes.FETCH_SUCCESS,
-    payload: { words },
-  };
-}
+export const fetchDictionarySuccess = (words: IWord[]) => ({
+  type: DictionaryActionTypes.FETCH_SUCCESS,
+  payload: { words },
+});
 
-export function fetchDictionaryError(error: Error) {
-  return {
-    type: DictionaryActionTypes.FETCH_ERROR,
-    payload: { error },
-  };
-}
+export const fetchDictionaryError = (error: Error) => ({
+  type: DictionaryActionTypes.FETCH_ERROR,
+  payload: { error },
+});
 
-export function fetchDictionary() {
-  return async (dispatch: Dispatch) => {
-    const apiURL = `${backendUrl}/words`;
-    dispatch(fetchDictionaryStart());
-    try {
-      const res = await fetch(apiURL);
-      const words = await res.json();
-      dispatch(fetchDictionarySuccess(words));
-    } catch (e) {
-      dispatch(fetchDictionaryError(e));
-    }
-  };
-}
+export const fetchDictionary = () => async (dispatch: Dispatch) => {
+  dispatch(fetchDictionaryStart());
+  try {
+    const res = await fetch(`${backendUrl}/words`);
+    const words = await res.json();
+    dispatch(fetchDictionarySuccess(words));
+  } catch (e) {
+    dispatch(fetchDictionaryError(e));
+  }
+};

src/store/reducers/dictionaryReducer/dictionaryReducer.ts

@@ -7,10 +7,7 @@ const initialState: IDictionaryState = {
   wordsLearned: [],
 };
 
-export default function dictionaryReducer(
-  state: IDictionaryState = initialState,
-  action: IDictionaryAction
-) {
+const dictionaryReducer = (state: IDictionaryState = initialState, action: IDictionaryAction) => {
   switch (action.type) {
     case DictionaryActionTypes.FETCH_START:
       return { ...state, isLoading: true };
@@ -21,4 +18,6 @@ export default function dictionaryReducer(
     default:
       return state;
   }
-}
+};
+
+export default dictionaryReducer;