7

So far, Redux hasn't made my life easier. Every time I add a component, I seem to unnecessarily create three files (action, constants, reducer) and think harder than necessary. But I believe there must be a clear advantage of using Redux that I am blind to. Let me take you to the following example.

enter image description here

Expected behavior:

The user can choose multiple items and add them to a shopping cart (POST to backend).

JQuery

This is what I naturally resort to, but I feel like I am doing it wrong if I use plain jQuery. Should I feel this way?

$(function() {
  $(".item").click(function(event) {
    $(event.target).toggleClass("selected");
  }

  $("button.submit").click(function() {
    var selectedItems = $(".item.selected");
    var itemIds = $.map(selectedItems, function(item) { return $(item).data("id") });
    $.post(some_url, {itemsToAdd: itemIds});
});

In React

I would do something like following:

ItemsContainer
  state: selectedItems
  functions: addItem, removeItem, saveCart

Item
  state: isSelected
  props: addItem, removeItem

In Redux

How can I do the same more easily? Maybe I shouldn't store selectedItems as a state inside ItemsContainer and inside a globalState?

1
  • In redux you want to set local state only if it has a presentational purpose. If your state will deal back-end logics it must be global and held in a node of the rootReducer. So Redux is a bit more organised in the end, as you have all your app skeleton separated from the superficial state.
    – Theo
    Feb 27, 2016 at 21:33

3 Answers 3

8

I don't think it's entirely necessary to create a reducer or action for each component. The reducer and its related actions should be based much more on themes within your data.

The problem may be the example is a bit too small to justify Redux's advantages. Redux aims to address issues of scale. Whereas if this were the entire app I don't see any reason why jQuery wouldn't suffice. People often complain about the "boilerplate" involved with Redux and similar Flux implementations, but its true value is revealed after your app becomes more complex.

To answer your question, I would have a single "Items" reducer and actions with anything related to "Items" and their interactions. Items state tree would have a key like isSelected that would be an array of unique identifiers.

The container itself should pass down "isSelected" as props not as state. I try to avoid having any internal state within components. The state should just continually be updated in a complete loop and passed down as props through your container. I would have a mapStateToProps function in my container that would facilitate this design pattern.

I think this example particularly influenced a lot of my design patterns: http://redux.js.org/docs/advanced/ExampleRedditAPI.html

3

You can't compare Redux to something like jQuery or React. jQuery and React both exist to facilitate manipulating the DOM. Redux exists to facilitate keeping 'state' in your apps.

The benefit you get from using Redux is that everything works in a predictable 'standardized' way. There are rules around what can modify your state. This to me is the single biggest benefit. It makes reasoning about the code simpler for complex applications. It makes adding new logic simpler. It will speed up development time because it's predictable.

If you manually keep state inside components like you do with jQuery/pure React you might end up with different implementations to do so throughout your application.

If you split out your state from your viewlogic you get the benefit of easier testing as well. If you use redux you'll write reducers which are super simple to test. If you have the same data manipulation spread around in your view code it'll be tricky to test it properly.

An added benefit for Redux is that everything passes through a single point. Namely the dispatcher which places all data in a single place, the store. This makes it super simple to extend your application using middlewares. To be fair this is usually not needed but it can be very useful at times. It also enables great tooling like time travel. This would not be possible in solutions where state is spread out throughout the entire app or where state is manipulated in different ways.

So, a unified way to deal with your data is a good idea for bigger applications you want to maintain.

3

There is a good explanation from Dan Abramov in which he explains that you might not need Redux. Of course he does also give a list of reasons why you might want to use Redux.

Dan’s reasons to use Redux include:

  • if you want to persist state to local storage,
  • provide alternative UI without disturbing too much of the business logic,
  • maintain an undo history without major changes to how the code is written.
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.