DEV Community

Cover image for React State 5 Ways

React State 5 Ways

Nader Dabit on October 05, 2020

Cover image by Bryan Goff To see the code for these examples, click here There are seemingly endless ways of dealing with state management in R...
Collapse
 
markerikson profile image
Mark Erikson

Note that we now specifically teach using our official Redux Toolkit package as the default syntax for writing Redux logic.

We have a new "Redux Essentials" core docs tutorial that builds a real-world app while teaching RTK as the standard way to use Redux, and I'm currently working on a new "Redux Fundamentals" docs tutorial that will teach the lower-level principles involved in using Redux, then finish by showing how and why to use RTK instead of writing Redux code by hand.

In this particular example, using RTK would keep the number of lines of code basically the same. Instead of this:

function notesReducer(state = [], action) {
  switch (action.type) {
    case 'CREATE_NOTE':
      return [...state, action.note]
    default:
      return state
  }
}

/* Here we create the store using the reducers in the app */
const reducers = combineReducers({ notes: notesReducer })
const store = createStore(reducers)
Enter fullscreen mode Exit fullscreen mode

You'd have:

const notesReducer = createReducer([], {
  createNote: (state, action) =>state.concat(action.payload)
})

const store = configureStore({reducer: {notes: notesReducer}})
Enter fullscreen mode Exit fullscreen mode

But, the difference in LOC between hand-written Redux and RTK becomes dramatically different as the app grows in size - RTK requires way fewer lines of code.

The updated tutorials should also make it a lot easier for people to learn Redux as well.

Collapse
 
dabit3 profile image
Nader Dabit

Hey Mark, thanks for the helpful update. I'll probably adjust my tutorial to use the most up to date implementation using Redux Toolkit. Nice work!!

Collapse
 
markerikson profile image
Mark Erikson • Edited

Thanks for the quick article update! One bugfix: the package installation example is wrong - the package name is @reduxjs/toolkit:

redux.js.org/introduction/installa...

Thread Thread
 
dabit3 profile image
Nader Dabit

Saved me, thank you!!

Collapse
 
spierala profile image
Florian Spier • Edited

What do you think of RxJS based state management in React world? E.g. Akita or MiniRx Store?
I am working on MiniRx. It is like Redux but implemented with RxJS. State is exposed as an RxJS Observable. Observables integrate nicely with Angular. But not sure about React and Observables.

Collapse
 
eecolor profile image
EECOLOR

Thank you for writing the article!

I noticed two common mistakes with the context example, see my reaction to another article here: medium.com/@ewestra/great-article-...

Collapse
 
rrackiewicz profile image
rrackiewicz • Edited

Could you respond to the claim that Recoil is a context replacement, not necessarily a Redux replacement. I haven't used Recoil but have watched their videos. I am a Redux user.

Also, wouldn't it be fair to add GraphQL cache to this list as well?

Thanks.

Collapse
 
vasco3 profile image
JC

Recoil is great but it's annoying that it doesn't work well with hot-reloading in development (have to manually refresh)

Collapse
 
aquibyatoo profile image
mohammad aQib

Awesome, such a nice to see you started with recoil :thumb

Collapse
 
drubb profile image
drubb

Great collection! Another nice solution would be Overmind by Codesandbox: overmindjs.org

Collapse
 
efleurine profile image
Emmanuel

Every time I see Redux those days. I am crying.

swr.vercel.app/
This library is not a state management per see. But I found sometimes I can get a long way with it.

Collapse
 
dbtek profile image
İsmail Demirbilek • Edited

I'd suggest looking in to unstated-next. It's based on context and React's state, handles async. It's dead simple and lightweight.

Collapse
 
juanmamenendez15 profile image
Juan Manuel Menendez Hernandez

You miss the great Apollo Client, which is better than the others you mentioned (in general)

Collapse
 
sirluky profile image
Lukáš Kovář • Edited

My favorite is state management library is zustand. It's very simple to use and flexible.