Add counter-vanilla example

[gaearon]

The new Counter Vanilla example is aimed to dispel the myth that Redux requires Webpack, React, hot reloading, sagas, action creators, constants, Babel, npm, CSS modules, decorators, fluent Latin, an Egghead subscription, a PhD, or an Exceeds Expectations O.W.L. level.

Nope, it's just HTML, some artisanal <script> tags, and plain old DOM manipulation. Enjoy!

[gaearon]

I haven't written HTML in ages. It looks so much like JSX! Oh wait

[ghost]

Reminds me of a CycleJS app <3

[gaearon]

I almost had a JS fatigue here but thank goodness @mjackson made npmcdn

[ghost]

Oh but you aren't using bower and webpack here, how can this possibly work?

[ForbesLindesay]

You can also use brcdn.org for any packages that don't include umd builds in npm :)

[mjackson]

👍

[imkost]

I wonder how render function would look for some bigger Vanilla application. Imagine, there is a Vanilla application with 5 fields in state object and with 5 ui widgets to represent them. So render function would look like:

function render() {
  var state = store.getState();

  rerenderWidget1(state.widget1);
  rerenderWidget2(state.widget2);
  rerenderWidget3(state.widget3);
  rerenderWidget4(state.widget4);
  rerenderWidget5(state.widget5);
}

Every time user performs an action, state updates and all widgets are rerendered (expensive!). Is there any way to rerender only particular widget? I guess we can keep previous state and check for changes:

function render() {
  var state = store.getState();

  if (areNotEqual(prevState.widget1, state.widget1)) {
    rerenderWidget1(state.widget1);
  }
  // ....
}

But I'm not sure if this is a good solution or not. If application is really big, then it would be way a lot of checks.

[gaearon]

We don't actually advise you to use Redux without a performant view layer like React, Deku, Angular 2, virtual-dom, etc. The point of this example is to show that Redux is not coupled to either and doesn't require build tools, but sure you'll need some abstraction. To clarify though, you don't need something like areNotEqual. A reference equality check is always enough because Redux assumes immutability. If something changes its reference changes.

[imkost]

Good point. Thanks