Live data from Hacker News

Learn how to use Redux step-by-step

github.com

11–20 of 33 posts

Re: Learn how to use Redux step-by-step

#11
post #3

You may also want to take a look at my own redux tutorial https://spapas.github.io/2016/03/02/react-redux-tutorial/

So what is the problem solved by Redux? I don't see a simple explanation of that in your write up. Most people struggle when asked this question. Some people go on about "time travel" and other fancy things that have nothing to do with the business problem you're trying to solve. Other people talk about "single source of truth" as if that didn't exist before Redux.

The problem is people creating different data architectures on every single project they create.

Redux specifies a unidirectional data flow with a single source of truth. And then it gives you very detailed tooling with which to debug this, and an ecosystem of middlewares to augment the incredibly basic/boilerplatey API either to simplify logic or to add extra features (for example, analytics).

Re: Learn how to use Redux step-by-step

#12
post #3

You may also want to take a look at my own redux tutorial https://spapas.github.io/2016/03/02/react-redux-tutorial/

So what is the problem solved by Redux? I don't see a simple explanation of that in your write up. Most people struggle when asked this question. Some people go on about "time travel" and other fancy things that have nothing to do with the business problem you're trying to solve. Other people talk about "single source of truth" as if that didn't exist before Redux.

Writing this from my phone so I cannot be as verbose as I want to be.

I can not speak for every case, so I will talk about why I sometimes use it in React:

First off, there is a synergistic effect where React handles data coming from above in the hierarchy, which Redux facilitates.

Secondly, it can be very hard to keep track of what components are handling what logic in large applications so having it abstracted away in an easy to test way is considered a win for many.

That is the good overview I feel, there's also that popular Dan Abramov medium post[0] that deals with it. I do believe redux is overused, and people would benefit from weighing whether simple react is good enough for a project, buy I understand the risk you feel you take on if the scope runs away and suddenly you need to do a costly migration to redux later on in the project where it can be a lot harder to do so.

[0] https://medium.com/@dan_abramov/you-might-not-need-redux-be4...

Re: Learn how to use Redux step-by-step

#13

Great tutorial. I recently published an overview of Redux here - https://medium.com/@guptagaruda/introduction-to-redux-and-mo...

Holding application state in a tree is nothing new. It is as old as software development itself. You don't need Redux for that. Actions and reducers are not solving any problems. If your application needs undo/redo then that's understandable otherwise get/set methods are all you need.

Redux is just one piece of the puzzle. Let me try to explain the problem it solves. Let's say if you are building a complex SPA with lot of UI components in the view and state changes impacts several parts of the view. You can build this view in several ways:

* Plain javascript with jquery - We can surely achieve it but the code quickly becomes a soup of callbacks and events handlers. After a while the code becomes unmanageable. This is pretty much the approach you're suggesting with getters/setters.

* AngularJS's dirty checking is one solution. It works and the code scales in large teams but perf suffers in complex views due to costly digests. It doesn't provide a way to conditionally exclude a sub-view from the digest cycle. This will become the main bottleneck (for perf) as the application grows.

* React and Angular 2/4 - React (shouldcomponentupdate) and Angular 2/4 (onpush change detection) leverages immutability very well to cut down re-render cycles. This is where Redux shines with its immutable way of changing state. It's uni-directional flow is another great benefit to keep the entire flow predictable and maintainable.

I am not saying all these things are needed for every SPA app out there. But these optimizations are needed for complex and performance sensitive applications. Check this out - https://medium.com/@dan_abramov/you-might-not-need-redux-be4...

Also, I know keeping application state as a single state tree is nothing new. I started this side project (https://github.com/guptag/FinCharts) almost four years ago with React/Immutable.js without any state management libraries (recently moved to electron from nodewebkit). But this code won't scale in large teams (entire ui state is declared in one file, cannot extend the functionality like Redux's middleware support etc).

Re: Learn how to use Redux step-by-step

#15

Earlier quoted context omitted.

Holding application state in a tree is nothing new. It is as old as software development itself. You don't need Redux for that. Actions and reducers are not solving any problems. If your application needs undo/redo then that's understandable otherwise get/set methods are all you need.

Redux is just one piece of the puzzle. Let me try to explain the problem it solves. Let's say if you are building a complex SPA with lot of UI components in the view and state changes impacts several parts of the view. You can build this view in several ways: * Plain javascript with jquery - We can surely achieve it but the code quickly becomes a soup of callbacks and events handlers. After a while the code becomes u…

None of these problems are unique to web development. How do you solve these problems in iOS? In iOS you use MVC, and the Application object holds the state as a tree. MVC has a better solution to all these problems.

Re: Learn how to use Redux step-by-step

#16

Earlier quoted context omitted.

Holding application state in a tree is nothing new. It is as old as software development itself. You don't need Redux for that. Actions and reducers are not solving any problems. If your application needs undo/redo then that's understandable otherwise get/set methods are all you need.

Redux is just one piece of the puzzle. Let me try to explain the problem it solves. Let's say if you are building a complex SPA with lot of UI components in the view and state changes impacts several parts of the view. You can build this view in several ways: * Plain javascript with jquery - We can surely achieve it but the code quickly becomes a soup of callbacks and events handlers. After a while the code becomes u…

No, if you get/set methods that doesn't imply javascript with jquery! I am using React, but not ReactRouter or Redux. I hold my application state in a tree, and the tree nodes have get/set methods. My state tree is not immutable. I think "immutable way of changing state" is an oxymoron.

Re: Learn how to use Redux step-by-step

#17

Earlier quoted context omitted.

So what is the problem solved by Redux? I don't see a simple explanation of that in your write up. Most people struggle when asked this question. Some people go on about "time travel" and other fancy things that have nothing to do with the business problem you're trying to solve. Other people talk about "single source of truth" as if that didn't exist before Redux.

This was a really long article so you may probably missed my reasoning for using redux. I'm copying from the "Introduction to redux section" (which comes right after the "Introduction"): "I have to say that I got interested in redux because of all that buzz this framework generated. However, I got really interested in it when I understood how close its philosophy was to functional programming - this, when combined wi…

Sorry, to me that's an unsatisfying answer. You are not saying what problem redux is solving for you. "It is like functional programming" does not even attempt to explain what the problem being solved is.

Re: Learn how to use Redux step-by-step

#18

Earlier quoted context omitted.

Redux is just one piece of the puzzle. Let me try to explain the problem it solves. Let's say if you are building a complex SPA with lot of UI components in the view and state changes impacts several parts of the view. You can build this view in several ways: * Plain javascript with jquery - We can surely achieve it but the code quickly becomes a soup of callbacks and events handlers. After a while the code becomes u…

No, if you get/set methods that doesn't imply javascript with jquery! I am using React, but not ReactRouter or Redux. I hold my application state in a tree, and the tree nodes have get/set methods. My state tree is not immutable. I think "immutable way of changing state" is an oxymoron.

How do you trace and replay state changes when debugging?

Re: Learn how to use Redux step-by-step

#19

Redux is unnecessary complexity. Anyone considering it, please do yourself a favor: check out an MVC framework and see how simple it is. Remember, when React first came out they described at as "React is the V in MVC." Adopt MVC in your project and watch your productivity soar. Note: Some people believe that MVC implies two-way data binding. This is false.

I've spent most of my time as a back end developer, occasionally dabbling in some front end code in various MVC frameworks. I always hated it and found it to be tedious.

I recently took up react+redux for a new project and for the first time feel like I'm developing for the UI in a way that makes sense and feel like I'm able to accomplish things way faster than with other clunky frameworks.

Re: Learn how to use Redux step-by-step

#20
post #3

You may also want to take a look at my own redux tutorial https://spapas.github.io/2016/03/02/react-redux-tutorial/

So what is the problem solved by Redux? I don't see a simple explanation of that in your write up. Most people struggle when asked this question. Some people go on about "time travel" and other fancy things that have nothing to do with the business problem you're trying to solve. Other people talk about "single source of truth" as if that didn't exist before Redux.

One benefit is that you have explicit events that create specific state changes. Your app is a succession of these events that certainly help when debugging and thinking about the potential states your app can be in.

Like other state management solutions, it also 'writes' all your shouldComponentUpdate methods for you.

Post reply on HN