Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

A SoundCloud client in React and Redux

robinwieruch.de

Post reply on HN
Print view View original

21–30 of 74 posts

Re: A SoundCloud client in React and Redux

#21

Post by iLoch »

Having worked with Redux on a few different projects I'd probably recommend a different approach than the one outlined in this tutorial.

One of the great things about React is the advice that you can put more in a single file than you used to be able to. We seem to have forgotten that concept when it comes to the data layer of most Redux applications I see.

I would suggest that people check out the Ducks pattern: https://github.com/erikras/ducks-modular-redux

To sum it up: your constants, action creators, action handlers, and reducer all go in a single file. You can export anything you need from a duck file, and the default export for any duck must be the reducer. This ends up being really nice - no more rapidly switching back and forth between action creator files, reducer files, your constant files, etc. It also allows you to easily collect all your ducks and attach them to a redux store (thanks to the default export.)

Some suggest putting any data fetching in the ducks as well - I think this can be handled on a case-by-case basis - I tend to prefer to keep my data managers in a separate "services" folder though, which are just files that export async functions like "fetchUser(id)" or "fetchArticles()"

Ultimately there are many different valid ways to structure your code, this is just one way that I've found to be much more enjoyable.

Re: A SoundCloud client in React and Redux

#22

Post by lopatin »

fpgaminer wrote: post #14

There seems to be a big blind spot in these Real World React+Redux tutorials when it comes to forms. For example, say I have a page with reviews on it. So there's a Component that handles editing a review. Where does the state for all the form inputs go? Does it go in the Redux store? If it does, then every time the user types a letter you get an event, which goes walking backward through the component tree until it…

For basic forms, where you're not doing something weird, why would intermediate form state need to live in Redux? Local React state seems best for that.

Re: A SoundCloud client in React and Redux

#23

Post by iyn »

Lazare wrote: post #19
fpgaminer wrote: post #14

There seems to be a big blind spot in these Real World React+Redux tutorials when it comes to forms. For example, say I have a page with reviews on it. So there's a Component that handles editing a review. Where does the state for all the form inputs go? Does it go in the Redux store? If it does, then every time the user types a letter you get an event, which goes walking backward through the component tree until it…

Everyone basically just uses Redux Form ( http://redux-form.com/5.2.5/ ) as near as I can tell; it really works well. It basically works as per your first guess: Everything goes in the store. And no, it doesn't really have any performance or efficiency issues. Try it out and see. :)

For improved performance (especially on big/complex forms) I suggest looking/using v6 (technically still in alpha, but stable).

Re: A SoundCloud client in React and Redux

#24

Post by acemarke »

fpgaminer wrote: post #14

There seems to be a big blind spot in these Real World React+Redux tutorials when it comes to forms. For example, say I have a page with reviews on it. So there's a Component that handles editing a review. Where does the state for all the form inputs go? Does it go in the Redux store? If it does, then every time the user types a letter you get an event, which goes walking backward through the component tree until it…

First: Redux is _not_ dogmatic about putting every last bit of your state into Redux. It is entirely up to you how much or how little goes into Redux. (This question comes up all the time, which is why I added it the the Redux FAQ [0] ).

So yes, there are absolutely times when it makes sense to keep data, such as frequent user input updates, in local component state, and only dispatch an action later. In fact, a while back I put together a wrapper component that does exactly that [1]. Made a few tweaks since then that I haven't added to the proof-of-concept in the gist, but the basic idea is there.

I do have a number of articles on React and forms in my React/Redux links list [2], but at the moment I don't think any of them specifically deal with Redux usage. Might be interesting to look through some of the apps listed in my real-world Redux apps list [3] - the Jenkins UI and Wordpress Admin Page apps might be relevant.

I will say that while Redux Form [4] is probably the most widely used Redux form logic library at the moment, React Redux Form [5] is another option that looks good. In fact, the current Redux Form 6.0 beta API is heavily inspired by RRF's API. My Redux addons catalog also has a page listing a number of other options of varying kinds [6] (none of which I've used myself, btw, just catalogued).

All that said, yeah, would be great if someone were to write up a larger, more in-depth article about dealing with forms.

[0]: http://redux.js.org/docs/FAQ.html#organizing-state-only-redu...

[1]: https://gist.github.com/markerikson/554cab15d83fd994dfab

[2]: https://github.com/markerikson/react-redux-links/blob/master...

[3]: https://github.com/markerikson/redux-ecosystem-links/blob/ma...

[4]: https://github.com/erikras/redux-form

[5]: https://github.com/davidkpiano/react-redux-form

[6]: https://github.com/markerikson/redux-ecosystem-links/blob/ma...

Re: A SoundCloud client in React and Redux

#25

Post by Renner1 »

fpgaminer wrote: post #14

There seems to be a big blind spot in these Real World React+Redux tutorials when it comes to forms. For example, say I have a page with reviews on it. So there's a Component that handles editing a review. Where does the state for all the form inputs go? Does it go in the Redux store? If it does, then every time the user types a letter you get an event, which goes walking backward through the component tree until it…

I agree with your point and disagree with redux-form being a valid solution. redux-form creates a very restricted and crippled API for getting form data into a redux state object and does so at the expense of the spirit of React's componentized model. Any redux-form state needs to be isolated under a special root object specifically for forms. You can't just mount some existing part of your state object into a form because of this. Not to mention redux-form properties have a whole bunch of other "glue" properties in addition to the actual value of the form.

I question whether people use it in large scale production. This is one of the huge downfalls of redux. It makes some things easier, but it makes the most fundamental stuff (editing form fields) extremely contrived. This is the main reason I don't see react+redux as a true answer to the challenges of SPA development but a very rough, intermediate step which needs to be re-thought while putting into consideration the most common use cases.

Re: A SoundCloud client in React and Redux

#27

Post by girvo »

Renner1 wrote: post #25
fpgaminer wrote: post #14

There seems to be a big blind spot in these Real World React+Redux tutorials when it comes to forms. For example, say I have a page with reviews on it. So there's a Component that handles editing a review. Where does the state for all the form inputs go? Does it go in the Redux store? If it does, then every time the user types a letter you get an event, which goes walking backward through the component tree until it…

I agree with your point and disagree with redux-form being a valid solution. redux-form creates a very restricted and crippled API for getting form data into a redux state object and does so at the expense of the spirit of React's componentized model. Any redux-form state needs to be isolated under a special root object specifically for forms. You can't just mount some existing part of your state object into a form b…

> I question whether people use it in large scale production.

We tried to, and removed it within 4 weeks of development with it, for all of the reasons you mentioned. It conceptually doesn't map to our Redux model, and new developers struggled with it because of that. I ended up writing my own "wrapper" to do something similar, but to be honest for most of our form state it is handled within the components themselves (via this.state and friends) and only sent to Redux once validated. React's built-in state handling is still useful, specifically for these sorts of things.

Re: A SoundCloud client in React and Redux

#28

Post by acemarke »

tzaman wrote: post #13

Nice tut, although I've learned one thing during past couple of months of developing with Redux: middleware is very useful and often quite an overlooked/underused part of the stack. In this tutorial, the author makes the call directly in an action, which is not its responsibility. Here's an example of the "api" middleware we've developed ( https://gist.github.com/tomazzaman/a98f5ad3f052592e564862e4d... ), and the bea…

Doing API calls inside async action creators / thunks _is_ entirely valid - in the end, it's still "creating actions". Just a question of how much duplication you want to deal with, consolidation, etc.

But yeah, middleware is a concept that isn't talked about as much, but on the flip side, there's dozens and dozens of middlewares people have created. In fact, there's at least a couple dozen middlewares I've seen _just_ for doing AJAX calls. See my list at https://github.com/markerikson/redux-ecosystem-links/blob/ma... .

Re: A SoundCloud client in React and Redux

#29

Post by acemarke »

girvo wrote: post #27
Renner1 wrote: post #25

Earlier quoted context omitted.

I agree with your point and disagree with redux-form being a valid solution. redux-form creates a very restricted and crippled API for getting form data into a redux state object and does so at the expense of the spirit of React's componentized model. Any redux-form state needs to be isolated under a special root object specifically for forms. You can't just mount some existing part of your state object into a form b…

> I question whether people use it in large scale production. We tried to, and removed it within 4 weeks of development with it, for all of the reasons you mentioned. It conceptually doesn't map to our Redux model, and new developers struggled with it because of that. I ended up writing my own "wrapper" to do something similar, but to be honest for most of our form state it is handled within the components themselves…

I'd be interested in seeing what you put together. Is that available somewhere?

Re: A SoundCloud client in React and Redux

#30

Post by girvo »

acemarke wrote: post #29
girvo wrote: post #27

Earlier quoted context omitted.

> I question whether people use it in large scale production. We tried to, and removed it within 4 weeks of development with it, for all of the reasons you mentioned. It conceptually doesn't map to our Redux model, and new developers struggled with it because of that. I ended up writing my own "wrapper" to do something similar, but to be honest for most of our form state it is handled within the components themselves…

I'd be interested in seeing what you put together. Is that available somewhere?

Not yet, but it will be!

https://github.com/studionone/ is where it will live, plan is to release it this week, all things going well.

Post reply on HN