DEV Community

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...

Read full post

Mark Erikson • Oct 5 '20

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)

You'd have:

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

const store = configureStore({reducer: {notes: notesReducer}})

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.

Nader Dabit • Oct 5 '20

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!!

Mark Erikson • Oct 5 '20 • 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...

Nader Dabit • Oct 5 '20

Saved me, thank you!!

Florian Spier • Oct 6 '20 • 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.

EECOLOR • Oct 9 '20

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-...

rrackiewicz • Oct 7 '20 • 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.