Redux or Not Redux

Gergel Gorvat

Volodymyr Vyshko

JS Community

JS Community

Agenda

Intro

Why you should use Redux

Why you shouldn't

Or Not Redux?

My experience with Redux

function mapStateToProps(state) {
 return {
    aRandomProp: Math.random()
 }
}

function mapStateToProps(state) {
 return {
    aFilteredArray: state.anArray.filter(value => value.isTrue === true)
 }
}

Creating New Objects In mapStateToProps

Use selectors, memoization and global state instead

Redux nested containers

Container

Container

Container

Component

Container

1..N

1..N

Component

Component

Component

Redux State Duplication

const state = {
  
  users: [{ ... }],
           
  selectedUser: {
     id: 1,
     name: 'Alyosha',
     start: startTime,
     end: endTime
  },
          
  numberOfUsers: 10,  
          
}

Often we have a piece of the state which can be computed from another

React state

Redux

(link)

Redux doesn't solve any problem. It just creates a new problem by giving you an abstract box. And what to store is that box - its your problem.

Dan Abramov

An antipattern is just like a pattern, except that instead of a solution it gives something that looks superficially like a solution but isn't one.


Andrew Koenig (C Traps and Pitfalls)

No encapsulation

Differnt lifecycle

Global store is a singleton

Problems with this global store

variables visible to all the other components, even components that don’t need to know about this prop

We must manually keep cleaning the store from garbage of old components that already left the screen

but a component may have many instances, singletons are most of the time considered an anti-pattern

Don't use Redux if you wasting much CPU time or RAM resources on maintaining the immutability

Don't use redux if your application using it mainly for caching fetched resources

Don't use redux if your app mainly consists of complex forms

Don't use Redux if your containers are mostly independent

Redux Google trend worldwide for the last year

October 2019

October 2020

25%

50%

75%

100%

25%

Why the popularity has decreased?

Learning curve

Boilerplate code

Performance

Central store

No built-in way to handle side-effects

State of JS 2020

Should we stop using Redux?

Is it dead ?

Use react features/hooks instead ?

Use Redux when

You need a single source of truth

You want to maintain an undo history

You need a serializable state/actions

Travel between the state history in development

Provide alternative UI without disturbing too much of the business logic

Otherwise...

Which library to use INSTEAD??

Small projects, without a reasonable amount of data, that is changing over time

Built-in features into your view lib/framework

Mostly keeping GraphQL data

Apollo

Relay

Medium-big projects with wide model and many async updates

MobX

Big projects with long support and big teams and with good predictability

Redux

MST

Projects with predictable model transitions and good reliability

JS Community

Questions

JS Community

Quiz time!

Thank You

JS Community

Made with Slides.com