TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: Redux-Tiles – library to deal with verbosity of Redux

35 pointsby bloomcaalmost 8 years ago

4 comments

acemarkealmost 8 years ago
I&#x27;ve looked at literally hundreds of Redux-related libraries and addons (and listed anything that looks decently useful in my Redux addons catalog [0] ). As part of that, I&#x27;ve seen dozens and and dozens of libraries that promised to &quot;reduce Redux boilerplate&quot; - usually functions for generating reducers based on lookup tables rather than switch statements, but also other approaches as well.<p>redux-tiles adds a bit more abstraction that I personally like, but it does look useful and appears to maintain the overall spirit of Redux (as opposed to many other &quot;wrappers&quot; that wind up trying to add OOP&#x2F;class layers on top, or obscure the fact that there&#x27;s actions, reducers, and dispatching going on, per some of the examples I listed in my blog post &quot;The Tao of Redux, Part 2 - Practice and Philosophy [1]).<p>I don&#x27;t think I&#x27;d use this myself, but it seems like a reasonable approach to &quot;reducing boilerplate&quot; overall. As always, it&#x27;s up to you the Redux user to decide how much abstraction you are comfortable with and want to use in your own application.<p>Thanks to the author for putting this together and posting it.<p>[0] <a href="https:&#x2F;&#x2F;github.com&#x2F;markerikson&#x2F;redux-ecosystem-links" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;markerikson&#x2F;redux-ecosystem-links</a><p>[1] <a href="http:&#x2F;&#x2F;blog.isquaredsoftware.com&#x2F;2017&#x2F;05&#x2F;idiomatic-redux-tao-of-redux-part-2&#x2F;" rel="nofollow">http:&#x2F;&#x2F;blog.isquaredsoftware.com&#x2F;2017&#x2F;05&#x2F;idiomatic-redux-tao...</a>
评论 #14485492 未加载
bloomcaalmost 8 years ago
Author here.<p>I worked with different domain models using Redux, and also different codebase sizes, and it finally led me to this library.<p>Originally I was involved into building data layer for collections (e.g. how Netflix shows list of series), and I was building a very complicated factory to produce kind of the same thing -- actions, reducer and selectors, with aggressive caching and normalizing.<p>Later I worked with less amount of entities, and more RPC style APIs (a lot of interaction with user, which are pretty much bunch of requests, where you track pending state, error and success -- think about reset password, obtaining a token, etc). When you have not so many entities, normalizing becomes not so necessary, but I have noticed couple of things which are constantly used and were giving me pain points: - tracking async code (e.g. dispatching start, failure and success) - universal approach to caching (each action creator often had slightly different caching mechanism) - nesting results (e.g. put `terms` under `documents` reducer) - because of verbosity I personally tended to combine a lot of logic under a single action (so sometimes several raw API requests were made from a single action, not just dispatching other actions)<p>I have tried to address all of these issues here. The idea is pretty simple -- the library creates a so-called &quot;tile&quot; with everything: actions, reducer, constants and selectors, allowing you to nest it in the state (so you can easily separate let&#x27;s say `user` part), and to nest results, universal approach to caching (all async requests are aggressively cached, so if you dispatch the same action, it will wait the already made request, and you can safely await returned promise). Also, I expose function back, so it is much easier to test it, in case you inject all dependencies to the middleware (I personally like it, but seems that it is an anti-pattern).<p>And the last thing -- in case you instantiate middleware for each request on the server side, you get back `waitTiles` function, which after dispatching all needed actions will return you a promise, awaiting which will give you fully resolved tiles. So, you can do dry run of the react render on the server, wait for tiles, and then safely render again, knowing that everything in `componentWillMount` under the render path will be fetched. This SSR part still has few questionable parts, but I feel it is a good idea in general (I want to write a post about possible scenarious, how to prefetch for SSR).<p>In case you have any questions, or just want to chat about different approaches in reducing boilerplate size for Redux, I&#x27;d be glad to answer!
评论 #14484367 未加载
jdpigeonalmost 8 years ago
Instead of creating another level of abstraction that a dev has to learn, how about just creating smart IDE tools that help with Redux? E.g. noticing that you&#x27;re creating another action and automatically creating a statement in the reducer
评论 #14485469 未加载
graphememesalmost 8 years ago
This is very nice, one of the major issues I have with the frameworks that are coming out is the large amount of boilerplate. Nice work.
评论 #14483837 未加载