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)