4 ms·
Here's a look at the folder structure we're using for our app: https://i.imgur.com/wc7DyOA.png https://i.imgur.com/wc7DyOA.png /actions: Flux action creators
by iLoch 11y ago
Here's a look at the folder structure we're using for our app: https://i.imgur.com/wc7DyOA.png https://i.imgur.com/wc7DyOA.png
/actions: Flux action creators
/components: These are all the JSX React components (the presentation layer) - so there are subfolders like "pages", "controls", etc.
/reducers: These are Redux reducers - they're the logic that handles all of the application state
/services: This is what your question was really about. We use basic ES6 modules for services, with methods like "fetchUser(id)" which use the new JS Fetch API behind the scenes. We then have redux-thunk and redux-promise middleware so we can easily offload state manipulation to these services without actually putting state logic in them.
I've set up a few React projects at this point and this always seems to keep a nice separation of logic. I'm never asking where data is coming from or where it's going. I think Redux has been the biggest difference maker when dealing with all of these parts.
It's no framework, but it's composed of well understood libraries, each with their own important function. You build the structure out yourself so you know exactly how it works, and the pattern will be very familiar to anyone who has used React before.
- eecks 11y agoReally, really helpful - thanks!
- lexhaynes 11y agoFor a beginner to react like me, this is INVALUABLE. Thanks :)
- MatthewPhillips 11y agoHow does one create a reusable component (something I could publish on npm for example) for React + Redux? The component would have to define its own data expectations, so the actions and reducers would have to be defined by the component. How would you do this, given your folder structure (which I think is very common in Redux/React apps)?
- iLoch 11y agoGenerally you don't actually use Redux in your component. Instead, you'd expose the action creators required by your component. Then the user has to make sure that the new state created from your actions gets back to your component via props. This is a common behaviour I've observed, anyway.
- threatofrain 11y agoI've been hesitant of Fetch() because of the lack of timeout; has anyone been able to successfully get around this issue?
- iLoch 11y agoYeah, this is an important question. I don't have answer for you and neither do the people in charge of the fetch API. It's an issue with promises not being cancelable. There's probably a reasonable argument that promises just aren't that great because you can only resolve or reject. Personally I don't see a huge problem with either resolving or rejecting with a message about the cause of the result. Others see it differently but they haven't been able to make any progress on a major problem. If you want to avoid this altogether there's no reason why you can't use a different library.
- EvanPlaice 11y agoWhat about using observables? Unlike promises, they can be cancelled at any time. Rxjs provides the observable data type. The extensions are functional reactive operators. There are operators used to retry, throttle, filter, debounce, etc. Angular2's http module is already based on Rxjs observables for this exact reason.
- bostonvaulter2 11y agoI don't have an answer for you but I dislike that Fetch() doesn't currently have any support for progress events. So say good-bye to your file-upload progress bar!