alexmochu

Project Setup

Create a directory and run the following command.

npm init 

For this tutorial, I will be adding an index.js file to the src folder, and this will be our entry point. Our file directory should look like this.

alexmochu

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.

---

General rules

1. Follow standard conventions.
2. Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
3. Boy scout rule. Leave the campground cleaner than you found it.
4. Always find root cause. Always look for the root cause of a problem.

Design rules

alexmochu

/*
 * General utils for managing cookies in Typescript.
 */
export function setCookie(name: string, val: string) {
    const date = new Date();
    const value = val;

    // Set it expire in 7 days
    date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000));

alexmochu

paypal id : mochualex4@gmail.com

alexmochu

import { combineReducers } from '@reduxjs/toolkit'

import clicksReducer from './counter'

const clicks = { count: clicksReducer }

export let rootReducer = combineReducers({
  ...clicks
})

alexmochu

{
    "package": {
      "dependencies": {
        "@reduxjs/toolkit": "^1.4.0",
        "@types/node": "^12.0.0",
        "@types/react": "^16.9.0",
        "@types/react-dom": "^16.9.0",
        "@types/react-redux": "^7.1.9",
        "react-redux": "^7.2.0",
        "redux": "^4.0.5",

alexmochu

import React from 'react';
import './App.css';

interface ICounterProps {
  value?: number;
  onIncrement?: any;
  onDecrement?: any;
  onIncrementAsync?: any;
}
const Counter: React.FC<ICounterProps> =

alexmochu

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

type CurrentDisplayState = {
  clicks: number
}

let initialState: CurrentDisplayState = {
  clicks: 0,
}

alexmochu

import { all, call, delay, put, takeEvery } from 'redux-saga/effects'
import { addCount } from '../counter';

export function* incrementAsync() {
  yield delay(1000)
  yield put(addCount(1))
}

export function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync)

alexmochu

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from './rootReducer';
import logo from './logo.svg';
import Counter from './Counter';
import { addCount, minusCount } from './counter';
import './App.css';

export const incrementAsync = () => ({
  type: 'INCREMENT_ASYNC',