DEV Community

[Comment from a deleted post]
Collapse
 
markerikson profile image
Mark Erikson

Hi, I'm a Redux maintainer. I have a few thoughts here.

First, this article is well written, and I appreciate you taking the time to put this together.

However, the patterns shown here are not how we want people to learn or use Redux today.

Everything you've shown here does work. But, we've completely changed how we teach Redux over the last couple years.

We have an official package called Redux Toolkit, which is now the standard approach for writing Redux logic. It simplifies all aspects of writing Redux code, including store setup, defining reducers, immutable update logic, and even creating entire "slices" of state at once.

With Redux Toolkit, setting up a store is just a couple lines of code, and you can write "mutating" state updates in reducers - no switch statements, no constants, no object spread operators:

// app/store.js
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer
  }
})

// features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment: state => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: state => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer
Enter fullscreen mode Exit fullscreen mode

The "Redux Essentials" tutorial in the Redux docs teaches Redux Toolkit as the default approach.

RTK is an abstraction, and it's still worth knowing how Redux works without any other layers on top. However, we've also simplified how we teach the basics of Redux.

The "Redux Fundamentals" tutorial in the Redux docs explains how Redux works from the ground up, but it teaches these patterns in simpler ways - organizing logic into single-file "slices", avoiding separate const ADD_TODO = "ADD_TODO" variables for action types, and explaining how all the pieces fit together in a more logical order.

I'd strongly encourage you and anyone else reading this to take the time to go through our official docs tutorials, because they show how we want people to learn and use Redux today.

Collapse
 
cenacr007_harsh profile image
KUMAR HARSH • Edited

I appreciate your input, I do agree things have changed today so I will write another blog, based on this one as how things have been simplified in modern Redux from the old times, and I would definitely recommend your videos in them as well.

Collapse
 
markerikson profile image
Mark Erikson

Thanks! Like I said, the code in this post is legal and will work, but even if you're going to write Redux logic "by hand", we now show some simpler patterns for doing that in the "Fundamentals" tutorial.

 
cenacr007_harsh profile image
KUMAR HARSH

I would definitely check out the tutorial and learn them. Thanks again for taking out the time to pointing this out.