Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add counter-vanilla example #1289

Merged
merged 1 commit into from Jan 27, 2016

Conversation

4 participants
@gaearon
Copy link
Contributor

commented Jan 27, 2016

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 gaearon added the examples label Jan 27, 2016

</head>
<body>
<div>
<p>

This comment has been minimized.

Copy link
@gaearon

gaearon Jan 27, 2016

Author Contributor

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

gaearon added a commit that referenced this pull request Jan 27, 2016

Merge pull request #1289 from rackt/counter-vanilla
Add counter-vanilla example

@gaearon gaearon merged commit 970d087 into master Jan 27, 2016

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

@gaearon gaearon deleted the counter-vanilla branch Jan 27, 2016

render()
store.subscribe(render)
document.getElementById('increment')

This comment has been minimized.

Copy link
@ghost

ghost Jan 27, 2016

Reminds me of a CycleJS app <3

<html>
<head>
<title>Redux basic example</title>
<script src="https://npmcdn.com/redux@latest/dist/redux.min.js"></script>

This comment has been minimized.

Copy link
@gaearon

gaearon Jan 27, 2016

Author Contributor

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

This comment has been minimized.

Copy link
@ghost

ghost Jan 27, 2016

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

This comment has been minimized.

Copy link
@ForbesLindesay

ForbesLindesay Jan 27, 2016

Contributor

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

This comment has been minimized.

Copy link
@mjackson
@imkost

This comment has been minimized.

Copy link

commented Jan 27, 2016

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

This comment has been minimized.

Copy link
Contributor Author

commented Jan 27, 2016

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

This comment has been minimized.

Copy link

commented Jan 27, 2016

Good point. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.