The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

React Flux: Components/Views

React Flux: Components/Views

9:39
In Flux our Components are referred to as Views, but they are the same familiar Components associated with any React development. In Flux, however, we have the benefit of the architecture to keep us from having to pass down through a long chain of children Components any functionality that may be embedded in our Stores. In this Lesson we will wire up all of our Components in record time utilizing the architecture we've already established.
Watch this lesson now
Avatar
egghead.io

In Flux our Components are referred to as Views, but they are the same familiar Components associated with any React development. In Flux, however, we have the benefit of the architecture to keep us from having to pass down through a long chain of children Components any functionality that may be embedded in our Stores. In this Lesson we will wire up all of our Components in record time utilizing the architecture we've already established.

Avatar
Martino

Firtst of all: nice serie :), btw it seems to me that the companion app.js code is not updated with the video. Besides this, is it possible to have the a downloadable version of the code?

In reply to egghead.io
Avatar
Tarjei Huse

What I miss is a discussion of how to handle errors in the flux architecture. Maybe an idea for a new movie?

Avatar
Todd

The app.js file included in this source does not match the video.

In reply to egghead.io
Avatar
Christopher

in app-store.js I had to make the following change:

var AppStore = assign({}, EventEmitter.prototype, {
    emitChange:function(){
        this.emit(CHANGE_EVENT)
    },

to avoid React key warnings in app-catalog.js :

var Catalog =
    React.createClass({
        getInitialState: function(){
            console.log(getCatalog());
            return getCatalog();
        },
        render: function(){
            var items = this.state.items.map(function(item){
                return <tr key={item.id}><td>{item.title}</td><td>${item.cost}</td><td><AddToCart item={item} /></td></tr>
            });
            return (
                <table className="table table-hover">
                    {items}
                </table>
            )
        }
    });
Avatar
Stephen

Yep, App.js example file was not updated.

/** @jsx React.DOM */
var React = require('react');
var Catalog = require('../components/app-catalog.js');
var Cart = require('../components/app-cart');
var APP =
    React.createClass({
        render: function () {
            return (
                <div>
                    <h1>Lets shop</h1>
                    <Catalog />
                    <h1>Cart</h1>
                    <Cart />
                </div>
            )
        }
    });
module.exports = APP;
Avatar
Sean Inglis

I've made the change suggested by others here (thanks!) but still come unstuck.

Tracing as best I can, when I click on the Add To Cart button, I can see the handleClick function fire, the VIEWACTION being dispatched from the app-dispatcher with an ADDITEM actionType, addPromise being called in the dispatch method of the base dispatcher, but Promise.all(promises).then(_clearPromises); never seems to resolve and fire the "then" clause.

Not of the events seem to be emitted.

Avatar
Vincent

Would be nice if the files provided worked/up to date :(
even after following advice above still getting:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Catalog. See http://fb.me/react-warning-keys for more information.

Avatar
Fareez

I'm getting the following error: "module "react/lib/merge" not found"

I'm guessing this stems from the boilerplate dispatcher code. Did I have to do anything to install the module that I missed?

Avatar
Billiam

Try checking out the flux website and getting the copy of the dispatcher from there under 'Creating a Dispatcher'. https://facebook.github.io/flux/docs/todo-list.html. It requires installation of the es6-promise module and object-assign, but I've found so far object-assign is the easiest way to get around the merge requirement since merge has been deprecated since this video was released.

In reply to Fareez
Avatar
Billy

I was getting the same issue. This worked for me.
npm install merge
var merge = require('merge');

In reply to Fareez
Avatar
Billy

If you're getting this error - "module "react/lib/merge" try doing this.
npm install merge
var merge = require('merge');

Avatar
Billy

If you're getting this error - "module "react/lib/merge" try doing this.
npm install merge
var merge = require('merge');

Avatar
Victor

Joe, one of the nice process related things about this course are the analysis & design wireframes, not only the interface mock-up but also the one showing what still needs to be implemented. Are you using any particular application to create these diagrams? Thanks for a great, up-to-date and very clear video series!

Avatar
Rahul

how does 'this.setState()' inside 'onChange' work?
_onChange is passed to eventEmmiter. So won't 'this' point to a wrong object when '
onChange' is called by eventEmmiter? or am i missing something here?

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?