DEV Community

Cover image for How to build a Fabulous Todo App using React, Redux and Framer-Motion

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

CodeBucks on April 22, 2021

Hey, I know building TODO List always won't get you too far😴, But It can teach you basic concepts and implementation of particular framework. her...
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. πŸ˜„

Collapse
 
lucianodiisouza profile image
O Primo Dev

I already know a little bit about redux, but i cannot be able to choose between useSelector hook and mapStateToProps, can anyone tell-me the basics difference between it?

Collapse
 
codebucks profile image
CodeBucks

There is nothing you can do with mapStateToProps/mapDispatchToProps that you can't do with the useSelector and useDispatch hooks as well.
I really like answer from this one, You can check it here.
stackoverflow.com/questions/597481...

else there is also an explanation on useSelector in the documentation:
react-redux.js.org/api/hooks

Collapse
 
lucianodiisouza profile image
O Primo Dev

Nice, im happy in know this! I appreciate your attention!

Thread Thread
 
codebucks profile image
CodeBucks

anytime ^_^

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
codebucks profile image
CodeBucks

??

Collapse
 
nibaamine101 profile image
Niba Amine

Ψ΄ΩƒΨ±Ψ§