Redux usage with hooks

In the project run `npm i redux react-redux redux-thunk --save`

// 1. Create redux folder with reducer, action types and action creators

// reducer.ts

import { COMMENT_ACTION_TYPES, CommentAction } from "~Redux/actionTypes";

import { IComment } from "~Interfaces";
import { getComments, saveComments } from "~Utils/localStorage";

export type ICommentsState = Readonly<{
  comments: IComment[];
}>;

const initialState: ICommentsState = {
  comments: getComments(),
};

const commentsReducer = (
  state: ICommentsState = initialState,
  action: CommentAction
): ICommentsState => {
  switch (action.type) {
    case COMMENT_ACTION_TYPES.ADD: {
      const { comment } = action;
      const comments = [...state.comments, comment];

      saveComments(comments);

      return {
        comments,
      };
    }

    default:
      return state;
  }
};

export { commentsReducer };

// actionCreators.ts

import { IComment } from "~Interfaces";
import {
  COMMENT_ACTION_TYPES,
  CommentAction,
  DispatchType,
} from "./actionTypes";

export function performDispatch(action: CommentAction) {
  return (dispatch: DispatchType) => {
    dispatch(action);
  };
}

export function addComment(comment: IComment) {
  const action: CommentAction = {
    type: COMMENT_ACTION_TYPES.ADD,
    comment,
  };

  return performDispatch(action);
}

// actionTypes.ts

import { IComment } from "~Interfaces";

export enum COMMENT_ACTION_TYPES {
  ADD = "add_comment",
  REMOVE = "remove_comment",
  EDIT = "edit_comment",
}

export type CommentAction = {
  type: COMMENT_ACTION_TYPES;
  comment: IComment;
};

export type DispatchType = (args: CommentAction) => CommentAction;

// 2. Make sure you create a store provider wrapping your app

import { createStore, applyMiddleware, Store } from "redux";
import { Provider } from "react-redux";
import thunk from "redux-thunk";

const store: Store<ICommentsState, CommentAction> & {
  dispatch: DispatchType;
} = createStore(commentsReducer, applyMiddleware(thunk));

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
        <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

// 3. Dispatch redux actions in any place of your app using hooks

import { useDispatch } from "react-redux";
import { Dispatch } from "redux";

import { removeComment, editComment } from "~Redux/actionCreators";

export const CommentsList: FC<ICommentsListProps> = ({ comments }) => {
  const dispatch: Dispatch<any> = useDispatch();

  const deleteComment = useCallback(
    (comment: IComment) => dispatch(removeComment(comment)),
    [dispatch]
  );