Code Monkey home page Code Monkey logo

the-redux-and-context-portfolio / react-counter-with-redux-hooks Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 502 KB

A classic CRA Typescript Counter App built with React Redux (not Redux Toolkit). Includes Action Creators, Reducers, Selectors, useDispatch and useSelector Redux Hooks.

JavaScript 0.37% HTML 6.61% TypeScript 79.53% SCSS 13.49%
counter-app create-react-app jest react-redux react-testing-library redux-hooks sound-effects typescript unit-testing usedispatch-hook useselector-hook

react-counter-with-redux-hooks's Introduction

image

About This App

A replica of the classic React JS Counter App Concept with a bit more style. Also includes sounds as well as unit test coverage with React Testing Library for practice/learning. Built with Create React App. This repo can be downloaded, install npm packages with npm install --legacy-peer-deps command and execute npm run test and npm run start.

React Testing Library - Unit Test Results/Coverage

---------------------------|---------|----------|---------|---------|-------------------
File                       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
---------------------------|---------|----------|---------|---------|-------------------
All files                  |   89.18 |       80 |    93.1 |   89.04 |                   
 src                       |   33.33 |      100 |     100 |   33.33 |                   
  App.tsx                  |     100 |      100 |     100 |     100 |                   
  index.tsx                |       0 |      100 |     100 |       0 | 11-12             
 src/components/buttons    |     100 |       50 |     100 |     100 |                   
  index.tsx                |     100 |       50 |     100 |     100 | 22-27             
 src/components/controls   |     100 |      100 |     100 |     100 |                   
  index.tsx                |     100 |      100 |     100 |     100 |                   
 src/components/counter    |     100 |      100 |     100 |     100 |                   
  index.tsx                |     100 |      100 |     100 |     100 |                   
 src/components/hooks      |     100 |    83.33 |     100 |     100 |                   
  use-number-name.ts       |     100 |      100 |     100 |     100 |                   
  use-on-reset.ts          |     100 |       50 |     100 |     100 | 16                
  use-sound-hook.ts        |     100 |      100 |     100 |     100 |                   
 src/components/utils      |      50 |      100 |      50 |      50 |                   
  click-sound.ts           |      40 |      100 |      50 |      40 | 8-10              
  reset-sound.ts           |      40 |      100 |      50 |      40 | 8-10              
  sound-icons.ts           |     100 |      100 |     100 |     100 |                   
 src/redux-store           |     100 |        0 |     100 |     100 |                   
  reducer.ts               |     100 |      100 |     100 |     100 |                   
  store.ts                 |     100 |        0 |     100 |     100 | 14                
 src/redux-store/actions   |     100 |      100 |     100 |     100 |                   
  counter.ts               |     100 |      100 |     100 |     100 |                   
  sound.ts                 |     100 |      100 |     100 |     100 |                   
 src/redux-store/features  |     100 |      100 |     100 |     100 |                   
  counterSlice.ts          |     100 |      100 |     100 |     100 |                   
  soundSlice.ts            |     100 |      100 |     100 |     100 |                   
 src/redux-store/selectors |     100 |      100 |     100 |     100 |                   
  get-counter.ts           |     100 |      100 |     100 |     100 |                   
  get-sound.ts             |     100 |      100 |     100 |     100 |                   
 src/redux-store/types     |       0 |        0 |       0 |       0 |                   
  action.ts                |       0 |        0 |       0 |       0 |                   
  counter.ts               |       0 |        0 |       0 |       0 |                   
  index.ts                 |       0 |        0 |       0 |       0 |                   
  sound.ts                 |       0 |        0 |       0 |       0 |                   
 src/test                  |     100 |      100 |     100 |     100 |                   
  render-with-provider.tsx |     100 |      100 |     100 |     100 |                   
---------------------------|---------|----------|---------|---------|-------------------
Test Suites: 8 passed, 8 total
Tests:       24 passed, 24 total
Snapshots:   0 total
Time:        5.216 s
Ran all test suites.

react-counter-with-redux-hooks's People

Contributors

sricharankrishnan avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.