React Redux with Hooks

react-redux new version now supports full usage of hooks with new function APIs.

⌨️ Full code using Connect

⌨️ Full code using hooks

❤️ Become a Patron and help the channel grow

👨‍👨‍👦 Join the community

🌍 Channel's website

[Classsed]

Important: I've updated the code in the 'redux-hooks' branch to use 'useDispatch' instead of 'useActions' since that has been removed in version 7.1.0-alpha.4 (link to the repository is in the description).

so instead of this:

const addTodo = useActions(addTodoAction);

we write this:

const dispatch = useDispatch();
const addTodo = (todo) => dispatch(addTodoAction(todo))

[wataruikedakay]

Nice overview for using hooks with react redux! By the way, the unknown components in react dev tools is because you were exporting your components as an anonymous function.

[MeloGrigorian]

useActions() removed in v7.1.0-alpha.4, based on Dan Abramov's suggestion.

[NirBenita]

This has been super helpful for a project I've been working on. Thanks so much!

[abhilashgandreti]

Thank you, Clearly explained the class -> hook migration process.

[danilo]

Very good video man.

I've just started a new project and I'm getting into hooks, so your video was really useful, thank you so much for sharing.

[ashishnirvikar]

Hii sir, i have a query.. if suppose i want to fetch data from my backend, so where should i used my fetch request.. in class based component we fetch request in componentDidMount() method, so in functional based component where should i used?

[chrisperry]

Jump to 18:44 for explanation on using Redux hooks (everything before this is setting up the code)

[sunstrike]

anyone explain to me why using bind at 28.15 at TodoList.js

[creative-commons-videos]

do i need to use reselect if using useSelector(), will it replace reselect ?

[parsaenami]

That was incredibly fluent and helpful. Thanks!

[Virus-kexj]

using useDispatch would be much better than useActions

[kamalkamals]

i guess must to update this video :

1- instead of const addTodo = useActions(addTodoAction) remplace to const dispatch = useDispatch(); const addTodo = (todo) => dispatch(addTodoAction(todo))
2- Instead of window.devToolsExtension && window.devToolsExtension() remplace to &&

[nelsonfrank]

Very clear easy to understand and useful tutorial about redux I ever watch, Thank you, brother...
My advice: I think to define the reducer function before using it, which make it easier to understand the entire thing

[baremetals]

I am not getting the state, I am get this error all the time "TypeError: Cannot read property 'setOpen' of undefined" I have your code. when I log in as a user I am able to get user state when I am logged out I cannot get state my UI state or modal state.. But I do not need to be logged in on the pages that I need the state. What could I be doing wrong?

[geelemo]

why not use useReducer in hooks instead of redux. any reasons please

[yinweiting]

Love your tutorial. However, i still do not really understand why facebook removed useActions hooks and replacing it with useDispatch. As you showed in the video, for the connect version, we just simply import the action creator, for example, addTodoAction and directly use it with addTodoAction(newTodo), we no longer need to dispatch it manually.But when back to useDispatch, we still have to dispatch an action by using dispatch(addTodoAction(newTodo)), wrapping and wrapping again. Personally my preference is to keep both useActions and useDispatch, like what connect does. you can pass actionCreator, or pass nothing, or pass mapDispatchToProps to the connect, but now in hooks, we could only use dispatch to trigger an action, feels really sad with that.

[krishind]

How to add a remote API capability if TODO store is remote and all list, update and add operations should be executed over REST API?

[shellcasing]

Hi. Could you please extend this by implementing localStorage to save the todos, and then fetching the todos with a getTodosAction?

[eleah]

Thanks. I'm always interested in hooks and efficient use of state - minimizing re-renders.