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
Collaborator

gaearon 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.

@gaearon

gaearon Jan 27, 2016

Collaborator

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

@gaearon

gaearon Jan 27, 2016

Collaborator

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

@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.

@ghost

ghost Jan 27, 2016

Reminds me of a CycleJS app <3

@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.

@gaearon

gaearon Jan 27, 2016

Collaborator

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

@gaearon

gaearon Jan 27, 2016

Collaborator

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

This comment has been minimized.

@ghost

ghost Jan 27, 2016

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

@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.

@ForbesLindesay

ForbesLindesay Jan 27, 2016

Contributor

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

@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.

@mjackson
@mjackson
@imkost

This comment has been minimized.

Show comment
Hide comment
@imkost

imkost 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.

imkost 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.

Show comment
Hide comment
@gaearon

gaearon Jan 27, 2016

Collaborator

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.

Collaborator

gaearon 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.

Show comment
Hide comment
@imkost

imkost Jan 27, 2016

Good point. Thanks

imkost 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