DEV Community

Discussion on: How to build a Fabulous Todo App using React, Redux and Framer-Motion

Collapse
 
mb20 profile image
Mb20

@codebucks Thank you so much for this post, I am new to react and redux and I've learned a lot from this "to do list". one question for the reducer functions defined in redux, they all take state and action as parameter, but when we use them in TodoItem, simply just pass the item.id for remove or complete which I understand the id is all we need, but still confused about how these parameter works from action, Thx again.

Collapse
 
codebucks profile image
CodeBucks

Hey, Thanks for appreciation๐Ÿ˜„
Have you learned the basic Redux without this redux-toolkit. If you haven't then I'd suggest you to try redux without redux-toolkit you'll get the whole idea of how redux works.
here is the article which I have wrote which explains Redux in simple terms,๐Ÿ‘‡
dev.to/codebucks/what-is-redux-sim...

If you have any doubt in this article, reply with specific code or location where you can't understand ๐Ÿ˜‰

Collapse
 
mb20 profile image
Mb20

Thank you for reply, I am confused about reducer.js line 51. I don't see any actions in addTodoReducer object, it is returned by createSlice(), which should be {name:, initialState:, reducers}.

Thread Thread
 
mb20 profile image
Mb20

I checked redux-toolkit.js.org/api/createslice, says createSlice automatically generates the action types and creators that correspond to reducers and state. I think this answered all my questions, in component DisplayTodos, we import addTodos as action creator which will take payload as parameter and return action object. I thought they are reducer functions.

Thread Thread
 
codebucks profile image
CodeBucks

Great that you figured it out yourself๐Ÿป, Yes redux-toolkit is a different than simple approach, It will do all the things by itself within createSlice function so we don't have to write more boilerplate code. ๐Ÿ˜„