TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Ask HN: How do you manage state in your React application?

71 点作者 thamizhan2611超过 6 年前
Is it recommended to use redux to share state across different components while you are using react-apollo client to sync remote data between client and server?<p>Looking forward to your views

27 条评论

tomduncalf超过 6 年前
Been using MobX for about three years and I think it is wonderful. Incredibly easy to use (mark your variable as observable, modify it like you would any normal variable, and any components which use those variables in their rendering and are marked as observers automatically update), very performant out of the box (only components affected by a change re-render so no shouldComponentUpdate needed) and some excellent features like computed variables for derived values which automatically update. I really urge everyone to try it out. There is the odd time when the abstraction us a bit leaky (e.g. working with arrays is a bit different to plain JS) but with proxies in MobX 5 this is much improved.<p>I started out with Redux and I do think it’s worth learning - not just because it’s so widespread, but the concepts behind it are worth knowing and have influenced the way I design some stuff, but I found it really verbose and slow to work with compared to MobX (and more error prone) - there probably are libraries that help with this.<p>React Hooks look interesting for more simple use cases but I expect I’ll stick with MobX for the foreseeable future.
评论 #19124262 未加载
评论 #19169307 未加载
评论 #19125193 未加载
评论 #19123765 未加载
enlyth超过 6 年前
We use Redux at work for larger projects, React setState&#x2F;Context for smaller ones, and I&#x27;m personally a huge fan of mobx-state-tree which I think is the best solution, and can be plugged into Redux if needed.<p>I think Redux should not be used for everything (there are libraries like Redux-Form which I think are an anti-pattern as ephemeral state like that should never go through the root reducer on every key change)
评论 #19126087 未加载
talkingtab超过 6 年前
In the past I used Redux extensively - and I have only good things to say about Redux. I recently started using React Context and found I was much more productive, to the extent that I went back and ripped out Redux code. The new hooks thing with useContext makes using context even easier.<p>Learning Redux, especially the &quot;single source of truth&quot; thing was very helpful, but my code is now simpler, easier to understand and faster to write.<p>I would recommend checking out React context and hooks. I would also recommend watching the Redux videos by Dan Abramov, even if you don&#x27;t use Redux.
vosper超过 6 年前
At my current job we use Redux, though I wouldn&#x27;t choose it myself (it had been adopted already when I joined). I think Redux is best suited to very large and complex applications, with very disciplined and skilled engineering teams, who talk to each other, refactor code, and have the time to think through things like the correct arrangement of application state, providing reusable selectors. Those teams, of course, would probably also do fine without Redux.<p>If you have a team that writes spaghetti code, or never has time to refactor, or doesn&#x27;t have effective communication then things will be worse with Redux, because it makes the code much harder to follow (good luck stepping through things in a debugger to see how they work, for example).<p>This is mostly intended as a criticism of people&#x2F;teams who think adopting Redux will solve problems with the messiness of their code. But I also think Redux is overly complicated and too abstract for 95% of projects. And don&#x27;t get me started on Sagas...<p>I would recommend setState as far as you can push it, then choosing something conceptually simple like MobX (Or MobX State Tree), React Easy State, or whatever the one from Formidable Labs is. Using Redux correctly is not as simple as it seems on the surface, and it requires real thought and real understanding o t
评论 #19124659 未加载
acemarke超过 6 年前
I&#x27;m a Redux maintainer. I&#x27;d specifically encourage folks to take a look at our new Redux Starter Kit package [0]. It includes several utilities that add good opinionated defaults around the small Redux core to simplify common use cases, including store setup, defining reducers, immutable update logic, and even creating entire &quot;slices&quot; of state without writing any action creators or action types by hand.<p>Long-term, I want this to be the standard way that most people use Redux.<p>[0] <a href="https:&#x2F;&#x2F;redux-starter-kit.js.org" rel="nofollow">https:&#x2F;&#x2F;redux-starter-kit.js.org</a>
gunn超过 6 年前
I created my own library for it.<p>Compared to redux it&#x27;s far more simple and requires none of the boilerplate. It also allows perfect type support with typescript.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;gunn&#x2F;pure-store" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;gunn&#x2F;pure-store</a>
sergiotapia超过 6 年前
Mobx is my go to. It&#x27;s fast, and a much easier mental model to integrate. Just inject the store you want into your components<p>@inject<p>and you can call&#x2F;set @observables easily.<p>It&#x27;s much easier to onboard people. Redux is just a spaghetti mess of files upon files, trying to find the actual implementation of something. A mess.<p>---<p>I also looked into Apollo and it&#x27;s obscenely good! Terrific dev UX. I&#x27;m heavily researching it currently.
arenaninja超过 6 年前
Using redux v4 with react-redux v5 for a large and complicated project. Was looking into react-redux v6 but it looks like there may be a significant performance hit (<a href="https:&#x2F;&#x2F;github.com&#x2F;reduxjs&#x2F;react-redux&#x2F;issues&#x2F;1164" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;reduxjs&#x2F;react-redux&#x2F;issues&#x2F;1164</a>) so will hold off on it now.<p>react-apollo is very interesting to me, but my understanding is that we&#x27;d need a graphql compatible backend, which we don&#x27;t have
评论 #19124004 未加载
评论 #19123625 未加载
eknkc超过 6 年前
apollo has a local state link (<a href="https:&#x2F;&#x2F;www.apollographql.com&#x2F;docs&#x2F;react&#x2F;essentials&#x2F;local-state.html" rel="nofollow">https:&#x2F;&#x2F;www.apollographql.com&#x2F;docs&#x2F;react&#x2F;essentials&#x2F;local-st...</a>) but I did not find it useful.<p>Redux is fine but I guess with the new hooks functionality one can combine usereducer and contexts to create a much simpler state manager.
achillesr超过 6 年前
Back when Redux was fairly new, we used a &quot;mixin&quot; architecture with a single component refreshing the entire global state of the application. Unfortunately, this has been a horrible decision and we&#x27;re currently moving towards a Redux based solution. Nonetheless, the rendering is still impressive.<p><a href="https:&#x2F;&#x2F;cellcollective.org" rel="nofollow">https:&#x2F;&#x2F;cellcollective.org</a>
liminal18超过 6 年前
there are a lot of options out there and this thread kind of surprised me was expecting more interesting submissions. you might want to look at the original flux:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;flux" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;flux</a><p>from facebook if you app has a lot of global state needs multiple stores can be handy.<p>Mobx is great too:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;mobxjs&#x2F;mobx" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;mobxjs&#x2F;mobx</a><p>With the current project I am working on we actually just vanilla javascript with singeltons with subscriptions (note: I did not write this, but I think it is rxjs).<p>anyways someone should come along with some answers.<p>Redux is still the easiest and with Sagas is really cool. One start up I interviewed with was using something similar to hooks, but do not remember the name of it.<p>Also datomic (used by om.next in clojurescript) has some really clever optimizations and is a joy to use.
jho406超过 6 年前
Full disclosure, I’m the author of Breezy, <a href="https:&#x2F;&#x2F;github.com&#x2F;jho406&#x2F;Breezy" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jho406&#x2F;Breezy</a>. An opinionated state shape and PJAX library for Redux.<p>I think “how you shape your state to make it easy to reduce and share between components” is an important topic that’s taken a backseat when discussing state management tooling.<p>Should I repeat my backend models? Should I use a redux ORM? How much should I denormalize or normalize?<p>I found it much easier to just denormalize everything and shape state for presentational purposes, e.g, I have a bunch of page nodes in my redux state each with a duplicated header. If I need to make an update to the header in response to, say, a change in user email, I change each duplicated header individually.<p>Sounds insane but it really works for me and let’s me keep more business logic in the backend where it belongs.
masiulis超过 6 年前
If you don&#x27;t have to support IE11, there has been a very interesting trend of JS Proxy based state managers (immer, react-easy-state, overmind, etc.). It reduces the boilerplate compared to redux while giving basically the same architecture. I have been using my own implementation, because react-easy-state did not work well with styled components (<a href="https:&#x2F;&#x2F;github.com&#x2F;UgnisSoftware&#x2F;lape" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;UgnisSoftware&#x2F;lape</a>), while I was building <a href="https:&#x2F;&#x2F;github.com&#x2F;UgnisSoftware&#x2F;Ugnis" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;UgnisSoftware&#x2F;Ugnis</a> if you want to see this approach in use.
woah超过 6 年前
The concept of having one store with associated actions is a great one, but Redux itself has an enormous amount of boilerplate having to do with the fact that you do all calls into your state functions as events which is completely unnecessary. Every project I’ve worked on using redux ends up having a ton of different abstractions just to reduce the redux event boilerplate overhead. I use unstated <a href="https:&#x2F;&#x2F;github.com&#x2F;jamiebuilds&#x2F;unstated" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jamiebuilds&#x2F;unstated</a> , which gives you the beneficial central store structure without the silly event concept.
chrisweekly超过 6 年前
I prefer mobx to redux bc it&#x27;s simpler.
bnjmnfrncs超过 6 年前
Redux. I really like keeping my state flat as the app I mainly work on has a lot of pages which use the same data. Complex component props are derived in mapStateToProps. I find reselect complex and hard to use with typescript, so I simply use memoized functions with memoize-one.
Waterluvian超过 6 年前
For my thick client robot management applications: Redux and an Immutable.Record. A very flat state. The only nested elements are GeoJSON features. Been doing this successfully across half a dozen deployed applications. It&#x27;s really simple.
sharmi超过 6 年前
Just to offer a different viewpoint, my app is rather lightweight in features and a rather hierarchical structure. So I have bern able to manage just fine with props and state. It rather feels quite clean that way
sbussard超过 6 年前
Hooks + Context seems like a win, as does xstate <a href="https:&#x2F;&#x2F;github.com&#x2F;davidkpiano&#x2F;xstate" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;davidkpiano&#x2F;xstate</a>
davewragg超过 6 年前
May I suggest giving Muster a look? (<a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=19134930" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=19134930</a>)
thamizhan2611超过 6 年前
I would like to thank each and everyone for their response. I will go through the suggestions and see how I can incorporate them in my app and post an update later :)
atis超过 6 年前
Pass the things returned from useReducer() hook (state object + dispatch function) down via context. Then useContext() in child components.
评论 #19145149 未加载
mharroun超过 6 年前
Been using the new Context API which has been super easy and simple to use. Though our product is not a giant SPA.
cnasc超过 6 年前
Using Redux at work, looking forward to trying out the newly released React Hooks for less sophisticated needs
fouc超过 6 年前
<a href="http:&#x2F;&#x2F;meiosis.js.org" rel="nofollow">http:&#x2F;&#x2F;meiosis.js.org</a> - this is the best way to manage state
oblomovshchina超过 6 年前
react-easy-state for smaller projects, apollo for bigger ones.
MarcIser超过 6 年前
Redux is the best!