Discussion on: React State 5 Ways

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.