React Flux: Components/Views

Joe Maddalone
InstructorJoe Maddalone

Share this video with your friends

Send Tweet

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.

Tarjei Huse
Tarjei Huse
~ 7 years ago

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

Christopher
Christopher
~ 6 years ago

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>
            )
        }
    });
Stephen
Stephen
~ 6 years ago

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;
Sean Inglis
Sean Inglis
~ 6 years ago

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 VIEW_ACTION being dispatched from the app-dispatcher with an ADD_ITEM 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.

Vincent
Vincent
~ 6 years ago

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.

Fareez
Fareez
~ 6 years ago

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?

Billiam
Billiam
~ 6 years ago

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.

Billy
Billy
~ 6 years ago

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

Billy
Billy
~ 6 years ago

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

Billy
Billy
~ 6 years ago

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

Victor
Victor
~ 6 years ago

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!

Rahul Devaskar
Rahul Devaskar
~ 6 years ago

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?