loading...

Discussion on: React State 5 Ways

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 Author

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

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 Author

Saved me, thank you!!