DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Krisztian Kecskes
Krisztian Kecskes

Posted on

Web Components with Redux

So, it's been a while since I wrote post. I spent my time with work and collect experience with new things, like native Web Components. I created an experimental project with them, that I would like to show you now.

You can find the project's source code on my GitHub profile.

πŸ”Ž Short description

My destination was clear:

  • Create a native web component
  • Use it multiple times in an HTML file
  • I wanted to use same component, but different values to show inside them
  • Connect them to a common store with the help of Redux

I wanted to use ES6 features, so I decided to use Webpack and Babel. Webpack took care about bundling process and development server function with webpack-dev-server.

The rest is very light. I created a counter component, that has a display to show a number, and under that there is a button that can help you to increase the number. I inserted three times counter component to the HTML DOM and connected them to a common store.

The Redux store is prepared to get three counter value with ID-s, so I can handle every counter component's value individually.

The main App module gets every counter value on the page and make a cumulate value with them and show it above the counters.

πŸŽ‰ That's all!

You can give a try the project, feel free to clone it!πŸ™‚

Top comments (0)

Top Heroku Alternatives (For Free!)

Recently Heroku shut down free Heroku Dynos, free Heroku Postgres, and free Heroku Data for Redis on November 28th, 2022. So Meshv Patel put together some free alternatives in this classic DEV post.