Example implementation of CRUD with REST JSON API

[barrystaes]

I am asking a lot, i know. But i cant do this without you / Flummox gurus.

Its hard to decide on what Flux flavor to use for my SPA. Right now Flummox is my favorite due to being Isomorphic, relatively popular, in active development. However it comes short on example implementations.

Just about any Flux flavor has a TODO example, and most lack server communication. I can't even imagine someone building apps without that.. i'm flabbergasted as to why there are no examples on that. I understand there are many ways to have data move from API to stores, but i just need one. I need it to work first, so i too can start looking at alternative API<->store implementations.

So i humbly ask to provide an example that;

• has UserStore and actions by Flummox
• talks with REST API in JSON such as /users/:id with GET, POST, PUT, and DELETE.

I believe this wil help Flummox adaption, as this is what just about anyone wants to use it for.

[acdlite]

I feel ya. I would love to have more examples. Right now we only have the one, which is the docs app, but that only covers GET. There are a few other examples in the wild, but none of them are full CRUD.

An example with a UserStore (which I assume is like a SessionStore) is a great idea. I get a lot of questions about this.

I have something in mind. Can't make any promises on when it will be done, though.

[barrystaes]

Thanks Andrew.

An example with a UserStore (which I assume is like a SessionStore) i was not referring to a 'sessionstore' as i understand that.. I meant just a list of items to create/read/update/delete. With the item type being something that many SPAs need, and houses several types of values: User.

With some fields like:

• username,
• email,
• language (dropdown string)
• active (boolean)
• (read-only) number of logins (integer)
• (read-only) last login (ISO8601 UTC date)
• (write-only) password (perhaps SHA later)

It would demonstrate the various types of fields and different but realistic data manipulation paths.

If you are looking for more examples to demo, an avatar picker would cover file uploads and if inclined some app auth (and api auth) would be of interest to many SPA makers.

If you must base it on a starter kit, my vote goes to https://github.com/webpack/react-starter (router bootstrap and most important of all a superb webpack config)

[barrystaes]

The example CRUD could be with fewer fields of course, but a realistic example has more than one field (vs the todo examples) which at least includes a string, integer, and boolean field.

The other fields and avatar are things to consider when we're at something that works.

@acdlite what did you have in mind? I dont see how a SessionStore is related to CRUD data/workflow at all.

[acdlite]

Usually (often) CRUD apps have some sort of authentication. I've gotten many inquiries about how to do isomorphic authentication with Flux.

[barrystaes]

Yes that is another problem i too need to solve.. Id be happy to see such an example implementation where many eyes agree upon Its design ofcourse.

But its wont even matter if i cant CRUD in the first place. :) Auth seems a way simpler problem once there is an app going.

[acdlite]

Here's an isomorphic example with Rails by @nambrot:

https://github.com/nambrot/rails-webpack-react-flux

I'll make a list of these as I become aware of them

[barrystaes]

With respect, sorry i do not see how that example is relevant here.. Its not using a REST API (it has no serverside storage) and its another one-field-per-item todomvc. The CRUD example i'm trying to find is about having multiple fields per item, like most actual usecases.

---

I am asking for insights in how to have stores to keep track of multiple fields per item (the right way), and in how to have stores (or anything really) talk to a serverside REST API.

There obviously are a lot of best practices on that, but i dont know them yet - but i would like to.

One thing i could do today - but i regard a "bad practice" - is to code the REST API calls directly in the component. But i'd rather have clientside caching (store) and a better flow (actions) to do that.

[acdlite]

You're right, it's not exactly what you asked for, but I'm posting it here for anyone else who's looking for examples that might be helpful.

If I had unlimited time I would have already created the example you're asking for, plus several others. But I don't, so please be patient. I'll have something for you as soon as I get to it.

[nambrot]

Sorry to just break in, but yes my example does use a serverside REST API. In fact I have shared the same frustration for the lack of a real CRUD example that goes beyond TodoMVC. Admittedly, I've not touched associations and user authentication.

[barrystaes]

I stand corrected, sorry @nambrot. :+1: I might have misread your list of cons on other examples as if they where features of yours.

[nambrot]

No Problem, as said I feel your frustration. Let me know if you have any questions.

[jirivrany]

Hi Barry. When I started learning flummox, I found an example made by @vesparny - https://github.com/vesparny/flux-immutable-example It is not complete CRUD, it only Reads the data from API mock. But maybe you will find it handy.

[barrystaes]

Thanks @jirivrany i already found it useful!

I am doing a Flummox example based on the popular react-starter here: https://github.com/barrystaes/react-starter/tree/userstore-flummox?files=1 (work in progress..)

[barrystaes]

I gave up on making this CRUD example, and also on using Flummox.

If anyone feels like showing how its done with Flummox, i'd be happy to hear!

[vesparny]

@barrystaes take a look at my github. I handled basic http calls wit express/flummox here: https://github.com/vesparny/widget

[alduro]

@barrystaes great sample. I'm using it. Thanks.

[eranimo]

I'm trying to build an isomorphic ES7 application using Flummox and I'm having trouble with auth. I used the docs as a base, using koa as a server to render react. I am also using a proxy to proxy api calls to my api server located on a different port. The problem is, I can't get my proxy server to correctly pass cookies to the client so that it can authenticate.

I ended up putting a JWT in the Authentication header, but that introduces new problems. I have a wrapper component that checks to see if you're logged in. If you're not, the auth store redirects you to the login page. If you have a token in your cookie, it tries to authenticate it by making an api call with the token in the Authentication header. The problem is, this is happening in the static function (just like in the docs site) which enables api calls to work isomorphically, but obviously the server doesn't have cookies, so I have to pass in the headers to that static function. This basically means I have to pass the auth token as a parameter to every api call.

An example doing auth with an API, through a proxy would be fantastic.

[alduro]

Same as @eranimo here. Using React-router I can not make auth working checking whether user is logged and redirect to login if not. More then 3 days going around on this.