DEV Community

Cover image for πŸ“š Redux Toolkit Setup Tutorial

πŸ“š Redux Toolkit Setup Tutorial

Raynaldo Sutisna on May 23, 2022

Introduction Does anyone feel reluctant when you want to implement Redux in your react app? I always feel implementing Redux at the begi...
Collapse
 
andrewbaisden profile image
Andrew Baisden

Good tutorial Redux Toolkit makes React development so much more calm than how it used to be before this.

Collapse
 
raaynaldo profile image
Raynaldo Sutisna

Thank you for the feedback!

Collapse
 
paras231 profile image
paras231

great explanation

Collapse
 
anesunapsta profile image
Anesu Napsta

Great, can you please do it on a CRUD operation.

Collapse
 
raaynaldo profile image
Raynaldo Sutisna

I did in my example repository. You can take a look

Collapse
 
zhannaosypenko profile image
Zhanna Osypenko • Edited

Great! Perfect algoritm and explanation. I include Toolkit conclusion in my notice. Thank you, Raynaldo.

Collapse
 
samjarvis244 profile image
Samuel Jarvis

This is the best redux explanation I've ever seen.

Collapse
 
dcavusoglu profile image
Duygu Γ‡avuşoğlu

thank you Raynaldo

Collapse
 
dcsan profile image
dc

I think you want

export const { addTodo } = todoSlice.action;

to be actions ?

because redux requiring pages and pages of intricate boilerplate wasn't confusing enough so there's some autogenerated magic in there too. or maybe its just JS lib churn

Collapse
 
raaynaldo profile image
Raynaldo Sutisna

Hi! Thank you so much for leaving this comment. Good catch! I just updated the code.

Collapse
 
adambiggs profile image
adam-biggs

Using components is a great way to structure web applications because they make it easier to reuse code. However, as the number of components grows, managing the communication and data flow between them becomes complex.

Redux and Context API are great solutions for managing data flow through React’s nested components. They both follow a similar philosophy: the state is taken outside the component tree and consumed as needed. In the case of Redux, external dependencies need to be installed, configured and maintained. Context API is integrated into the React core and requires minimal configuration.

If you are interested in learning a bit more about this, I'd recommend this article by Andy Fernandez, which dives into the details on Redux: scalablepath.com/react/context-api...

Collapse
 
melaku_21 profile image
Melaku Azene

until I read this blog I really don't understand what is toolkit and how to apply it
thanks a lot

Collapse
 
jrrs1982 profile image
Jeremy Smith

preloadedState overwrites initialState in your immer slices, so initialState should be empty - you can't remove as its a required field in the slice.

Collapse
 
stonebreaker_d47e2b5c607d profile image
Stonebreaker

**

This is really helpfull

**

Collapse
 
miiidnight profile image
Ali Mahmoodi

I spent days looking for a concise, easy to understand explaination about redux toolkit and this is the only one that helped me finally get it