[{"data":1,"prerenderedAt":332},["ShallowReactive",2],{"project-14859206":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":43,"post_text":45,"what":46,"said":90,"maker_in_thread":199,"shape":206,"grid":209,"attempts":294,"same_week":295,"maker_shows":42,"maker_hidden":324,"reader_version":325,"card":326},"14859206","Kea","The power of Redux with the simplicity of MobX","title","Show HN: Kea – The power of Redux with the simplicity of MobX","https:\u002F\u002Fkea.js.org","kea.js.org","mariusandra",1501096326,2017,60,39,710,2242,32,"notable","languages","state management library","library",[24,25,26,27],"redux","mobx","react state management","react","mixed",-0.077,{"positive":31,"neutral":32,"mixed":33,"critical":34},3,4,1,6,14,{"design":37,"execution":38,"docs":40,"idea":41},{"positive":33,"critical":31},{"positive":39,"critical":33},0,{"positive":39,"critical":33},{"positive":42,"critical":33},2,[31,31,33,39,33,33,39,44,39,31,33,39,39,39,33,39,39,39,39,39,39,39,39,39,39,39,39,39,39,39,39,31,39,31,39,44,33,39,44],5,null,{"problem":47,"audience":61,"pricing":45,"motivation":45,"time_to_build":45,"stack":66,"openness":88,"stage":89,"team_size":88},{"value":48,"source":49,"evidence":50},"Redux boilerplate and complexity in large React apps","inferred",[51,55,58],{"id":52,"by":53,"text":54},"14859705","kasbah","Looks pretty neat. My initial reactions: - I don't like the `@kea(...` because it's another bit of JS syntax I hadn't heard of before. Though I do like decorators in Python, I…",{"id":56,"by":11,"text":57},"14859966","Hey, indeed it's an example, as you point out. This was the best example I could come up with that demonstrated most of the functionality available, yet remained rather small in…",{"id":59,"by":11,"text":60},"14867559","Because the examples are just that, examples. Kea is designed for large complicated apps, and is in production use for at least 4 apps that I'm aware of (from marketplaces to…",{"value":62,"source":63,"evidence":64},"React developers building large applications","maker",[65],{"id":59,"by":11,"text":60},[67,75,83],{"value":68,"source":49,"evidence":69},"JavaScript",[70,71],{"id":52,"by":53,"text":54},{"id":72,"by":73,"text":74},"14859883","spankalee","I'm a big fan of decorators, but it seems like much of the React\u002FRedux world is overly class-decorator happy. It's really common to define properties in a decorator which would…",{"value":76,"source":49,"evidence":77},"React",[78,79],{"id":72,"by":73,"text":74},{"id":80,"by":81,"text":82},"14860155","acemarke","It's worth noting that both the React and Redux teams generally discourage the use of decorators. Quoting the Create-React-App README: > Create React App doesn’t support…",{"value":84,"source":49,"evidence":85},"Redux",[86,87],{"id":52,"by":53,"text":54},{"id":56,"by":11,"text":57},"unknown","launched",{"praise":91,"objections":104,"requests":127,"questions":145,"alternatives":164},[92],{"value":93,"source":94,"evidence":95},"Reduces Redux boilerplate and is clean to read","commenter",[96,100],{"id":97,"by":98,"text":99},"14860360","nathancahill","Thanks for sharing those functions. Definitely cuts down on a lot of the boilerplate I see with Redux.",{"id":101,"by":102,"text":103},"14859592","dpnewman","The concept expressed in the title matches a desire. Looking forward to checking out and hearing other's experiences.",[105,115,120],{"value":106,"source":94,"evidence":107},"The Slider example is overwrought for a simple carousel",[108,112],{"id":109,"by":110,"text":111},"14859653","pavlov","I know it's just an example... But the Slider code is ridiculously overwrought. Building this type of image carousel is trivial with just plain HTML+CSS+JS. This example uses…",{"id":113,"by":110,"text":114},"14860987","Just to clarify, I'm not picking on you; I realize it's hard to come up with meaningful examples. The problem with Slider is that it doesn't readily extrapolate into anything…",{"value":116,"source":94,"evidence":117},"Decorator syntax is unfamiliar and discouraged by React and Redux teams",[118,119],{"id":52,"by":53,"text":54},{"id":80,"by":81,"text":82},{"value":121,"source":94,"evidence":122},"Duplication between action names and reducers remains",[123,124],{"id":52,"by":53,"text":54},{"id":125,"by":11,"text":126},"14859904","Hey, 1) As munchor pointed out, you don't need to use the decorators. See the \"what is this @kea()\" button in the first guide for more details: https:\u002F\u002Fkea.js.org\u002Fguide\u002Fcounter…",[128,138],{"value":129,"source":94,"evidence":130},"Better type safety, such as Flow or TypeScript support",[131,135],{"id":132,"by":133,"text":134},"14863504","Ciantic","Is this type-safe? Can it infer the payload type somehow? With MobX you can write type-safe code, and it's pretty important in bigger code bases. Redux can be made type-safe but…",{"id":136,"by":11,"text":137},"14867547","Hi, propTypes are supported as an (optional) first class citizen. Thus whatever is the output of a reducer or a selector, provided it is passed to a react component, is type…",{"value":139,"source":94,"evidence":140},"Less decorator-heavy API, with properties defined in the class",[141,142],{"id":72,"by":73,"text":74},{"id":143,"by":73,"text":144},"14860082","> That said, the magic with having a big options hash in the `@kea({})` call itself is that then you can easily disconnect the logic from your components as your application…",[146,153],{"value":147,"source":94,"evidence":148},"Why not just use plain React state for these examples",[149],{"id":150,"by":151,"text":152},"14860110","OliverLassen","Why not just use state, which seems like the correct solution to the examples?",{"value":154,"source":94,"evidence":155},"How does it handle async flows like redux-saga",[156,160],{"id":157,"by":158,"text":159},"14860108","arstin","If my favorite part of redux is structuring flows with redux-saga, does mobx-state-tree have a solution for me? For example, this is nice: ``` \u002F\u002F On login, spin off the auth…",{"id":161,"by":162,"text":163},"14860196","aidos","MST doesn't have the same restrictions as redux in terms of async so you don't need to do it in the same way. Edit: In MST it would look more like plain js: ``` class AuthStore()…",[165,175,179,186,193],{"value":166,"source":94,"evidence":167},"MobX State Tree",[168,172],{"id":169,"by":170,"text":171},"14859715","north","Shameless plug for another take on the same promise: https:\u002F\u002Fgithub.com\u002Fjnorth\u002Fmegalith I think most people who are attracted to Redux's core principals but want a more…",{"id":173,"by":162,"text":174},"14860051","Looks nice. Seems to do a good job of making the code easy to read. I'm assuming you started this before mobx state tree? It looks very similar. After much experimentation, MST…",{"value":176,"source":94,"evidence":177},"Megalith",[178],{"id":169,"by":170,"text":171},{"value":180,"source":94,"evidence":181},"Recompose",[182],{"id":183,"by":184,"text":185},"14861456","armandososa","Looks nice, but I think I can get most of it using recompose, which I've been using extensively lately.",{"value":187,"source":94,"evidence":188},"react-organism",[189],{"id":190,"by":191,"text":192},"14860717","burntcaramel","I’ve made a lightweight React library influenced by functional setState, and supports async\u002Fawait\u002FPromises, extracting values from DOM \u002F forms easily, pure function actions,…",{"value":194,"source":94,"evidence":195},"Redux boilerplate helpers from Redux docs",[196],{"id":197,"by":81,"text":198},"14860431","Also worth noting that the Redux docs _specifically_ have a section called \"Reducing Boilerplate\" [0] that shows how to write functions like this, and my Redux addons catalog [1]…",{"comments":34,"answered":42,"key":200},[201,204,205],{"id":202,"text":203},"14859938","Hey, thanks for the feedback! This is definitely something to think about, as nothing in the syntax of kea is set in stone. That said, the magic with having a big options hash in…",{"id":125,"text":126},{"id":56,"text":57},{"commenters":207,"max_depth":44,"maker_replies":34,"first_comment_mins":18,"lifespan_hours":208},21,22,[210,212,216,218,220,221,222,223,225,227,230,232,236,239,241,243,247,249,251,253,255,258,260,263,264,265,267,269,271,272,273,275,279,282,283,284,286,289,290],[52,39,31,211,53,39],"project\u002Fmixed\u002Fdesign",[213,39,31,214,215,39],"14859794","project\u002Fneutral\u002Fdesign","munchor",[72,39,33,217,73,39],"project\u002Fcritical\u002Fdesign",[202,39,39,219,11,33],"maker\u002Fneutral\u002Fdesign",[143,39,33,217,73,39],[80,39,33,217,81,39],[125,39,39,219,11,33],[97,39,44,224,98,39],"project\u002Fpositive\u002Fdesign",[197,39,39,226,81,39],"commenter\u002Fneutral\u002Fnone",[228,39,31,214,229,39],"14861973","kiliancs",[109,33,33,231,110,39],"project\u002Fcritical\u002Fexecution",[233,33,39,234,235,39],"14859736","commenter\u002Fneutral\u002Fidea","namuol",[237,33,39,234,238,39],"14859751","jiert",[56,33,39,240,11,33],"maker\u002Fpositive\u002Fidea",[113,33,33,242,110,39],"project\u002Fcritical\u002Fdocs",[244,33,39,245,246,39],"14860848","commenter\u002Fneutral\u002Fdocs","chickenfries",[248,33,39,245,110,39],"14861028",[250,33,39,245,246,39],"14861227",[169,42,39,252,170,39],"other\u002Fneutral\u002Fnone",[173,42,39,254,162,39],"other\u002Fpositive\u002Fdesign",[256,42,39,257,170,39],"14860193","other\u002Fneutral\u002Fperformance",[259,42,39,254,162,39],"14860677",[261,42,39,262,170,39],"14861190","other\u002Fneutral\u002Fdesign",[157,42,39,262,158,39],[161,42,39,262,162,39],[266,42,39,262,170,39],"14860297",[268,42,39,262,158,39],"14860514",[270,42,39,262,170,39],"14861106",[190,31,39,262,191,39],[183,31,39,262,184,39],[274,31,39,262,191,39],"14861873",[276,32,31,277,278,39],"14859627","project\u002Fneutral\u002Fidea","kevincennis",[280,32,39,281,11,33],"14859983","maker\u002Fneutral\u002Fidea",[132,44,31,214,133,39],[136,44,39,219,11,33],[101,34,44,285,102,39],"project\u002Fpositive\u002Fidea",[150,287,33,288,151,39],7,"project\u002Fcritical\u002Fidea",[59,287,39,281,11,33],[291,292,44,285,293,39],"14859517",8,"33degrees",[],[296,301,306,311,316,320],{"id":297,"name":298,"points":299,"category":300},"14821478","$200 Solar Self-Sufficiency  Without Your Landlord Noticing",491,"infrastructure",{"id":302,"name":303,"points":304,"category":305},"14859084","Chromeless",385,"dev_tools",{"id":307,"name":308,"points":309,"category":310},"14853212","Musikcube",340,"creative",{"id":312,"name":313,"points":314,"category":315},"14841859","Conference List",296,"productivity",{"id":317,"name":318,"points":319,"category":20},"14854915","Teachcraft",212,{"id":321,"name":322,"points":323,"category":305},"14821186","Mesh IDE",199,false,"v2",{"id":327,"name":5,"line":6,"ai":324,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":328,"top":18,"kw":329,"maker":11,"domain":10,"tier":19,"attempts":39,"strip":330,"url":9,"mix":331,"praise":93,"objection":106,"sub":21},14859206,-0.08,[24,25,26,27],"331011050310001000000000000000030305105",[31,32,33,34],1793990962146]