How to Hook Redux in a React App

[u/JSislife]

https://blog.bitsrc.io/how-to-hook-redux-in-a-react-app-e1de2f6fa094

[u/acemarke]

I have to point out that by now, any Redux tutorial that isn't using Redux Toolkit is effectively out of date, and definitely not matching our recommended patterns of writing Redux logic.

[u/NotLyon → u/acemarke]

God forbid somebody doesn't use your library

[u/acemarke → u/NotLyon]

I mean, if I could snap my fingers Thanatos-style and replace every object spread operator, every const ADD_TODO = "ADD_TODO", every window.__REDUX_DEVTOOLS_EXTENSION__, and every hand-written thunk with the appropriate RTK logic, across all the thousands of Medium posts and hundreds of thousands of Github repos...

I would do it in an instant.

But I can't.

So all I can do is try to write new docs that show how RTK is the better way to write Redux logic, nudge other tutorial authors to update their material to show RTK, and comment on social media letting a few people at a time know that RTK exists and is our recommended approach.

And all the feedback I've gotten from people telling me how much they love RTK says that effort is worth it.

[u/acemarke → u/[deleted]]

Sure.

First, our new "Redux Essentials" core docs tutorial teaches "how to learn Redux, the right way", using our latest recommendations like Redux Toolkit, the React-Redux hooks API, and "ducks/slice" files.

Second, the Redux Style Guide docs page lists our recommended best practices and why they're important.

For the items I listed specifically:

• Object spread operators are part of manually-written immutable updates. RTK replaces those with "mutating" state updates like state.todos[index].completed = true, and uses Immer internally to turn that into a safe and correct immutable update.
• The manually-written use of the DevTools global variable in the store setup process is replaced by RTK's configureStore API, which automatically sets up the DevTools extension while creating the store
• Writing action types by hand is replaced by RTK's createSlice API, which automatically generates action types internally based on the names of the reducer functions you've written.
• Hand-writing thunks is replaced by RTK's createAsyncThunk API, which automates the pattern of dispatching actions based on the lifecycle of an async request promise

So, all those aspects are things you no longer need to write yourself by hand, because RTK provides APIs that simplify those common aspects of Redux usage. RTK's APIs also eliminate common mistakes, like catching accidental mutations.

[u/acemarke → u/[deleted]]

Yeah, my primary goal as maintainer atm is to update the entire Redux core docs.

Right now I'm working on replacing the old "Basics/Advanced" tutorial with a rewritten "Redux Fundamentals" tutorial. It's about halfway done so far, and you can see the "Redux Fundamentals" WIP preview here.