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

科技回声

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

GitHubTwitter

首页

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

资源链接

HackerNews API原版 HackerNewsNext.js

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

I created the same app with React and Redux

71 点作者 sunilsandhu超过 5 年前

14 条评论

yawaramin超过 5 年前
This article isn&#x27;t really a comparison. It&#x27;s almost completely dedicated to explaining Redux. In fact the complexity of explaining even this simple app with just a couple of components, should serve as a reminder of how complex Redux is. The only real mention of the plain ReactJS version is near the end, where it actually links to <i>another</i> article which compares ReactJS and Vue.
评论 #21254741 未加载
评论 #21254441 未加载
ericmcer超过 5 年前
This app is way too simplistic to yield any benefit from state management. This reads more like an intro to redux than a comparison of building apps with vs without redux.
评论 #21257044 未加载
antoineMoPa超过 5 年前
Every React + Redux I&#x27;ve worked with were needlessly bloated &amp; slow. I think that there is something that leads to bloat and slow performance in the react+redux world, but I can&#x27;t quite identify it yet.
评论 #21254187 未加载
评论 #21254265 未加载
评论 #21254197 未加载
评论 #21254089 未加载
评论 #21254015 未加载
dzonga超过 5 年前
React and it&#x27;s cousin in tow, Redux put food on my table. But like a famous HN comment said: how many startups have been burn out due to the complexity of wiring up those two powerful tools. I think frankly, when comparing frontend frameworks the benchmarks should be 1. lines of code, since that determines delivery 2. ease of maintenance as that enables easy to add new features 3. how fast the app executes on the customers device. And frankly React + Redux results in writing a lot of code
评论 #21254705 未加载
评论 #21254783 未加载
评论 #21254936 未加载
leshow超过 5 年前
With the useReducer hook a lot of these differences have gone away. The important difference is that redux will use global state. It&#x27;s use of the Context API makes components less portable.<p>Redux has it&#x27;s place, I think it&#x27;s structure can be nice at times, but you pay for it. This app is not anywhere near the size where I would consider using Redux though.
评论 #21254051 未加载
jaequery超过 5 年前
I ask myself this a lot, are all the boiler plating you have to do for Redux “really” necessary just to have state management?<p>Can we try combine the actions, types, and reducers into a single domain so they aren’t seemingly repeated in 3-4 different locations. Maybe an option to combine or separate as needed.<p>I know there are alternatives like Mobx and even the newer React Hooks so this seem to affirm my thinking that it might not be all necessary.<p>And I personally haven’t seen any benefits from all the separations you do in Redux at least from projects I’ve worked on, all it led to was verbosity and more typing. It tend to make code more prone to mistakes and harder to follow.<p>If I see the benefits, I wouldn’t mind but either I don’t see it or haven’t seen it yet. It just feels a bit like pre-mature optimization or over-abstraction.
评论 #21254193 未加载
评论 #21253865 未加载
评论 #21254575 未加载
评论 #21253944 未加载
评论 #21254178 未加载
评论 #21253866 未加载
评论 #21254140 未加载
评论 #21258131 未加载
评论 #21256886 未加载
Phillips126超过 5 年前
A while back I was building a large application for an internal team at my company. It got to the point where local state was just not solving all of my problems so I started to explore Redux. I had been creating React apps for several years but I could not wrap my head around Redux - it was far too much complexity adding all sorts of actions, reducers, boilerplate, etc. I started looking for alternatives and stumbled upon Mobx which I liked much better and have been using ever since.<p>Mobx-react[0] felt like much less work with virtually the same outcome. You create a single (or multiple stores), pass it into your app with a<p><pre><code> &lt;Provider Store={store}&gt; &lt;App &#x2F;&gt; &lt;&#x2F;Provider&gt; </code></pre> and you are off to the races. When adding the global state to a component, it was super easy:<p><pre><code> export default inject(&#x27;Store&#x27;)(observer(MyComponent)) Or use decorators (requires ejecting create-react-app or modifying the webpack configuration settings): @inject(&#x27;Store&#x27;) @observer class MyComponent extends Component {...} export default MyComponent </code></pre> Accessing the store:<p><pre><code> const {myValues} = this.props.Store </code></pre> In the store you organize your code by observables (global variables), actions (functions that modify observables) or computed (highly optimized functions that return values derived from state). I treat it as a &quot;source of truth&quot; in a single file.<p><pre><code> import {observable, action, computed, decorate} from &quot;mobx&quot; class Store { &#x2F;&#x2F; Observables myValues = [0, 1, 2, 3, 4] &#x2F;&#x2F; Actions addValue = num =&gt; myValues.push(num) &#x2F;&#x2F; Computed get getTotal() { return myValues.reduce((total, cur) =&gt; total + cur) } } decorate(Store, { myValues: observable, addValue: action, getTotal: computed }) const store = new Store() export default store </code></pre> In the end I felt that my code was far more readable and maintainable but your miles may vary.<p>Here is a relatively simple example of how to use mobx-react demonstrating an observable, action, and computed: <a href="https:&#x2F;&#x2F;www.codementor.io&#x2F;susanadelokiki&#x2F;managing-state-with-mobx-iqax3wp63" rel="nofollow">https:&#x2F;&#x2F;www.codementor.io&#x2F;susanadelokiki&#x2F;managing-state-with...</a><p>[0] <a href="https:&#x2F;&#x2F;github.com&#x2F;mobxjs&#x2F;mobx-react" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;mobxjs&#x2F;mobx-react</a>
评论 #21262589 未加载
sysbin超过 5 年前
I&#x27;ve been rewriting one of my hobby projects. I&#x27;m going from vanilla javascript to react as a newbie in react. The project isn&#x27;t even close to being finished when I started the task of rewriting a month ago and the main thing I&#x27;ve noticed is improvement in code structure.<p>I think someone would have a better time getting their head around the code now and without me guiding them than before. Although the project was already well organized. I make directory structure and naming conventions a high priority&#x2F;OCD obsession. I think thats mainly why my hobby projects never see an end.<p>Unlike the author I haven&#x27;t went with Redux and I&#x27;ve been just using react context with hooks for passing data. I&#x27;m really pleased with react context because now things are even more organized than without using context. The only downside with react that I&#x27;ve encountered is trying for the least amount of re-rendering when context changes. I&#x27;ve been reading a lot of optimizing react blogs online. I&#x27;m trying to make the app realtime focused with websockets and I don&#x27;t want to face a difficult situation later on where many users blows up the app to a crawl. Anyway I just wanted to express context is really useful so far.
sod超过 5 年前
If anyone here is familiar with the game factorio ... not using redux feels like conveior belts vs redux being flying robots. Suddenly everything seems easy and accessible. And writing spaghetti is nearly impossible.<p>If you ever intend to hire another person into a mature app using redux, he&#x2F;she is gonna love you for presenting all state via dev toolbar on a silver platter.
评论 #21257089 未加载
acemarke超过 5 年前
Hi, folks. I&#x27;m a Redux maintainer. Wanted to let everyone know about the two major things we&#x27;re working on at this point.<p>First, we have a new official package called Redux Starter Kit [0], which is our recommended toolset for writing Redux apps with less boilerplate. It includes utilities to simplify several common Redux use cases, including store setup, defining reducers, immutable update logic, and even creating entire &quot;slices&quot; of state at once without writing _any_ action creators or action types by hand.<p>RSK is useful for both folks who are new to Redux and experienced users, and can be used day 1 in a new project or incrementally added to an existing project. I&#x27;d strongly encourage anyone who&#x27;s using Redux to try it out. In particular, I&#x27;d suggest reading through the &quot;Advanced Tutorial&quot; page [1], which demonstrates how to use RSK with TypeScript, thunks for async data fetching, and our new React-Redux hooks API. You might also want to read through the issue comment that lays out my &quot;Vision for Redux Starter Kit&quot; and the problems it&#x27;s meant to solve [2]<p>I just published RSK v0.8 this evening [3] which has a couple small breaking changes (primarily renaming a `slice` field to `name` and making it required). After that, I&#x27;m hoping to nail down a couple last bits of configuration, and then push it to 1.0 within the next week or two.<p>After that, we&#x27;re going to start working on a major revamp of the Redux core docs. You can see my planned outline here [4]. The goals for the docs revamp include:<p>- Updating the tutorials, including removing outdated concepts like references to &quot;Flux&quot;, distracting mentions of terms or warnings that beginners don&#x27;t need to worry about, adding diagrams, and finding ways to improve the explanations (like changing the &quot;Middleware&quot; page to explain how to _use_ middleware, rather than why they work this way). We will also add a tutorial section that shows how to use Redux Starter Kit, and recommend that people use it as the &quot;default way to use Redux&quot;.<p>- Adding a &quot;Real World Usage&quot; docs section. This would include topics like choosing async middleware, debugging, folder structures, performance, and so on.<p>- Adding a &quot;Style Guide&quot; page. The Redux docs are deliberately unopinionated about things like folder structures, async middleware, structuring actions and reducers, and so on. However, we&#x27;d like to provide some official guidance on our current recommended best practices. The Vue docs have a great page with their recommendations, why they recommend certain patterns, and how strongly they recommend them, and we&#x27;d like to do the same thing here. For example, we&#x27;d recommend using a &quot;feature folder&quot; or &quot;ducks&quot; pattern for structuring files, treating actions as &quot;events&quot; instead of &quot;setters&quot;, and trying to put as much logic as possible in reducers.<p>- Adding a &quot;Thinking in Redux&quot; section. This would include concepts like mentally modeling actions, the history of Redux and its inspirations, how it&#x27;s meant to be used, and why it works the way it does.<p>I&#x27;d love to have additional help from the community in working on this docs revamp - I certainly can&#x27;t do it all myself :)<p>Finally, I&#x27;d encourage folks to watch my Reactathon 2019 talk on &quot;The State of Redux&quot; [5], where I talked about Redux&#x27;s market share and how it compares to other tools, as well as future directions for the library. In addition, my post &quot;Redux - Not Dead Yet!&quot; [6] addresses some common questions about how things like hooks and GraphQL relate to Redux.<p>If anyone&#x27;s got questions, feel free to ask!<p>[0] <a href="https:&#x2F;&#x2F;redux-starter-kit.js.org" rel="nofollow">https:&#x2F;&#x2F;redux-starter-kit.js.org</a><p>[1] <a href="https:&#x2F;&#x2F;redux-starter-kit.js.org&#x2F;tutorials&#x2F;advanced-tutorial" rel="nofollow">https:&#x2F;&#x2F;redux-starter-kit.js.org&#x2F;tutorials&#x2F;advanced-tutorial</a><p>[2] <a href="https:&#x2F;&#x2F;github.com&#x2F;reduxjs&#x2F;redux-starter-kit&#x2F;issues&#x2F;82#issuecomment-456261368" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;reduxjs&#x2F;redux-starter-kit&#x2F;issues&#x2F;82#issue...</a><p>[3] <a href="https:&#x2F;&#x2F;github.com&#x2F;reduxjs&#x2F;redux-starter-kit&#x2F;releases&#x2F;tag&#x2F;v0.8.0" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;reduxjs&#x2F;redux-starter-kit&#x2F;releases&#x2F;tag&#x2F;v0...</a><p>[4] <a href="https:&#x2F;&#x2F;github.com&#x2F;reduxjs&#x2F;redux&#x2F;issues&#x2F;3313#issuecomment-450601554" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;reduxjs&#x2F;redux&#x2F;issues&#x2F;3313#issuecomment-45...</a><p>[5] <a href="https:&#x2F;&#x2F;blog.isquaredsoftware.com&#x2F;2019&#x2F;03&#x2F;presentation-state-of-redux&#x2F;" rel="nofollow">https:&#x2F;&#x2F;blog.isquaredsoftware.com&#x2F;2019&#x2F;03&#x2F;presentation-state...</a><p>[6] <a href="https:&#x2F;&#x2F;blog.isquaredsoftware.com&#x2F;2018&#x2F;03&#x2F;redux-not-dead-yet&#x2F;" rel="nofollow">https:&#x2F;&#x2F;blog.isquaredsoftware.com&#x2F;2018&#x2F;03&#x2F;redux-not-dead-yet...</a>
wry_discontent超过 5 年前
Redux isn&#x27;t complex. It provides a simple way of doing state management. React-redux is slightly more complex, but only because the docs give the horrible advice of grouping things by type instead of domain. Using the &quot;ducks&quot; pattern is vastly superior and simplifies a lot. It also hurts, I think, that most people create actions and reducers that are 1:1. Those should be different things.<p>Hooks, imo, simplified a lot of these issues.
评论 #21259860 未加载
sebringj超过 5 年前
Essentially redux is programming the state part of your app outside your UI and having an immutable approach where given a state X with Y action, Z will always result so its good for testing. This does allow you to reuse the redux parts in different frameworks quite easily but I have never done that myself. I personally find redux to be heavy for most apps as most apps are small but in teams redux shines.
jdmg94超过 5 年前
If you find Redux &quot;Too complex&quot; or you feel &quot;it requires too much boilerplate&quot; then this is a clear indication you don&#x27;t need Redux. The real use-case for Redux is highly complex applications, if you&#x27;re using redux for your todo app then of course the cost&#x2F;benefit ratio for you is not gonna work out
jcelerier超过 5 年前
Thanks, I&#x27;ll keep using QML (<a href="https:&#x2F;&#x2F;github.com&#x2F;jcelerier&#x2F;TodoMVC-QML" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jcelerier&#x2F;TodoMVC-QML</a>) ;p