Customizing without Redux

What if you don’t want to use Redux

The pwa-starter-kit is supposed to be the well-lit path to building a fairly complex PWA, but it should in no way feel restrictive. If you know what you’re doing, and don’t want to use Redux to manage your application’s state, that’s totally fine! We’ve created a separate template, template-no-redux, that has the same UI and PWA elements as the main template, but does not have Redux.

Instead, it uses a unidirectional data flow approach: some elements are in charge of maintaining the state for their section of the application:

static get properties() {
  return {
    _clicks: { type: Number },
    _value: { type: Number },
  }
}

They pass that data down to children elements:

<counter-element
  value="${this._value}"
  clicks="${this._clicks}">
</counter-element>

Note the ${this.PROPERTY} syntax is LitElement’s method of data binding, which is the same syntax for passing an expression to a JavaScript template literal.

In response, when the children elements need to update the state, they fire an event:

_onIncrement() {
  this.dispatchEvent(new CustomEvent('counter-incremented'));
}

And those events can easily be listened for with LitElement’s declarative data binding event handler syntax:

<counter-element
    @counter-incremented="${this._increment}"
    @counter-decremented="${this._decrement}">
</counter-element>

In the above example, @counter-incremented listens for a counter-incremented event and calls this._increment when it receives it. @counter-decremented listens for a counter-decremented and then calls this._decrement.

Exercises

Here are two updates to make to our counter in my-view2.js. Before attempting these updates, there are 2 important prerequisites:

1. Make sure you are working in your pwa-starter-kit-no-redux project
2. There is a bug in the my-view2.js file in template-no-redux where

<div class="circle">${this._clicks}</div>

should be

<div class="circle">${this._value}</div>

Make that change and then give these 2 exercises a try:

1) Add a “Reset” button that resets the “clicked” and “value” counters to 0.

2) Add a “Double Increment” toggle that causes the “+” and “-“ buttons to increment/decrement by 2 when it is toggled on.

Next step

For a small app like this, you can see you might not need Redux. But as you build a more complex app, Redux can be very useful. So let’s look at how we can build this same PWA with Redux in the next step:

• Redux and State Management.