This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Flux Architecture: Dumb Stores

2:03 React lesson by

In this lesson we'll simplify future development by reducing the logic contained in our application's store.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this lesson we'll simplify future development by reducing the logic contained in our application's store.

Avatar
Jacob

There are two main.js files. I am getting an error when running your code from github (actually two errors). One is that babel is now babel-core. The other is: Error: Cannot find module "./src/js/main.js".

Avatar
Jacob

The solution was to include:
babel-preset-react, babel-preset-es2015, babel-polyfill, and babel-loader to my npm dev dependencies.

In reply to Jacob
Avatar
Joseph

Nice find on the phantom main.js, I've removed it from the applicable branches to avoid any confusion. You shouldn't need babel-polyfill, only the two presets as covered in the first lesson. Good job finding it on your own anyways. :)

In reply to Jacob
Avatar
Arek Śliwa

Thank you for great tutorial! I love tutorials with buildiing shops :)

Avatar
Stephen

Joe... Thank you for the excellent tutorial. It really got my brain juices flowing!

I learn best by rewriting the code into my preferred style as I go through the course. I have uploaded a repo of my final project to GitHub.

Kind regards,

Stephen Turner

@LittleBrainz

Avatar
Maximilian Kern

Thanks for a great tutorial. I was wondering if there is a guide on how to call async ajax requests with react, Would be awesome to implement that into this project.

Avatar
Pete

Great series; would be nice to take an application built with just react, then take and apply the flux architecture to it and show how they differ.

Additionally would be neat to see how to inject testing in this application too.

Thanks!

Avatar
Irvin

Great series. Thank you.

Avatar

Is it possible to Deploy to a share hosting like hostgator or bluehost?

Avatar
Webmaster

Great tutorial! Maybe you can help I'm really struggling adapting your project to pull data via a fetch of a json api. I basically replaced your getCatalog() function in the CartAPI to use a fetch to get the data. However, two problems are that fetch is asynchronous and also returns a promise. Therefore i cannot get it to populate the react components.

One improvement we could make to our Flux application is to get a lot of this logic out of our store and leave our store pretty dumb and just consuming an API of sorts. I'm going to delete all that and what I've done is, I've taken that exact same code and created a directory called API and there I've got a JavaScript file called cart-api.js.

I've just converted those all to objects and object methods. We've taken our fore-loop that initially populates it and thrown it into this init method and we call that right before we export our cart API.

Now back in our store we can just import that and update a bunch of these methods. Here we do cart-api.cart-items. We'll skip this one for right now. Here we'll return cart API totals and then on each of these method calls it'll just be from cart to API.

This one here is a bit complex. It really looks like something that belongs in our cart API. I'm going to grab this and jump over to our API, jump that guy right there, cite this.catalog, object assign, this.cart-items, and we're looking good. Save that, and we'll jump back to our app store and this get-catalog and just return [inaudible 01:38] API, get-catalog.

Let's try that out in the browser and it looks like everything is working just fine. I'm just going to jump around a bit, test everything out, increase, decrease, and remove and continue shopping. Everything's working just fine and our app store is a bit dumber, a bit easier to manage...


Featured course:

Building apps with Ionic 2

Building apps with Ionic 2

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