Skip to content
@The-Redux-And-Context-Portfolio

The Redux and Context Portfolio

  • India

About

A curated collection of small, dynamic projects demonstrating the seamless integration of React Redux stores and React Context. The repository offers a journey through the evolution of Redux, starting with traditional createStore to modern day configureStore as well as the use of React Context API, demonstrating the flow of data between React components.

The projects are also crafted with examples of frontend unit testing with React Testing Library. User interactions are enhanced with engaging sound effects, adding a layer of interactivity and fun to the learning experience.

How to Install and Run Projects

Sure, here's the installation and running instructions in a markdown bullet point list:

  1. Each of the projects is created with Create React App.
  2. Clone a repository of your choice:
    git clone https://github.com/your-username/your-repository.git
  3. After the download is completed, switch into the project folder:
    cd your-repository
  4. Run the npm install command to install dependencies:
    npm install
    If you encounter issues, try:
    npm install --force --legacy-peer-deps
  5. Start the application to see it open in your browser:
    npm run start
  6. To run the tests and see the results:
    npm run test

Popular repositories

  1. react-counter-with-connect react-counter-with-connect Public

    A classic CRA Typescript Counter App built with React Redux (not Redux Toolkit). Includes Action Creators, Reducers, MapStateToProps, MapDispatchToProps, Redux Connect API

    TypeScript

  2. react-counter-with-redux-hooks react-counter-with-redux-hooks Public

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

    TypeScript

  3. react-counter-with-redux-create-reducer react-counter-with-redux-create-reducer Public

    A classic CRA Typescript Counter App built with Redux Toolkit. Uses the 'createAction' and 'createReducer' methods from the redux library.

    TypeScript

  4. react-counter-with-redux-create-slice react-counter-with-redux-create-slice Public

    A classic CRA Typescript Counter App built with Redux Toolkit. Uses the 'createSlice' method from the redux library.

    TypeScript

  5. react-counter-with-redux-thunks react-counter-with-redux-thunks Public

    A classic CRA Typescript Counter App built with Redux Toolkit. Uses the 'createSlice' method from the redux library. Also uses createAsyncThunks for a delayed effect for UI Updates

    TypeScript

  6. react-counter-with-react-context react-counter-with-react-context Public

    A classic CRA Typescript Counter App that uses React Context API to help manage state between react components. Uses react testing library for unit tests as well.

    TypeScript

Repositories

Showing 7 of 7 repositories
  • .github Public
    0 0 0 0 Updated May 23, 2024
  • react-counter-with-redux-create-reducer Public

    A classic CRA Typescript Counter App built with Redux Toolkit. Uses the 'createAction' and 'createReducer' methods from the redux library.

    TypeScript 0 0 0 0 Updated May 15, 2024
  • react-counter-with-redux-create-slice Public

    A classic CRA Typescript Counter App built with Redux Toolkit. Uses the 'createSlice' method from the redux library.

    TypeScript 0 0 0 0 Updated May 15, 2024
  • react-counter-with-redux-thunks Public

    A classic CRA Typescript Counter App built with Redux Toolkit. Uses the 'createSlice' method from the redux library. Also uses createAsyncThunks for a delayed effect for UI Updates

    TypeScript 0 0 0 0 Updated May 15, 2024
  • react-counter-with-react-context Public

    A classic CRA Typescript Counter App that uses React Context API to help manage state between react components. Uses react testing library for unit tests as well.

    TypeScript 0 0 0 0 Updated May 15, 2024
  • react-counter-with-redux-hooks Public

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

    TypeScript 0 0 0 0 Updated May 11, 2024
  • react-counter-with-connect Public

    A classic CRA Typescript Counter App built with React Redux (not Redux Toolkit). Includes Action Creators, Reducers, MapStateToProps, MapDispatchToProps, Redux Connect API

    TypeScript 0 0 0 0 Updated May 11, 2024

Top languages

Loading…

Most used topics

Loading…