Using Immer with Reducers and React Hooks

Показать описание

Learn how to simplify your reducers with Immer and integrate it with React Hooks.

Links from video:

----

----

----

----
Follow Me Online Here:

#benawad

----
#benawad

Рекомендации по теме

Комментарии

This is what I was looking for, I had already done making my userReducer a lot mess. This will certainly make my reducer cleaner.

redraushan

Hey Ben, this is super useful. Will definitely try it in my next project. Thank you so much for publishing such latest videos. Your hardwork is much appreciated. :)😊

HarshalHirve

In your final version you used this function:

const [todos, dispatch] = useImmerReducer(todosReducer, []);

Could you just use this instead:

const[todos, dispatch] = useReducer(produce(todoReducer), []);

Thanks Ben for introducing this incredibly useful library as it dramtically simplifies creating reducers with complex state. I'm new to React. Your Youtube series has greatly deepened my knowledge.

kenhilliard

so glad you ended up trying it out Ben! love it!

TheAidsaids

Thanks! This is so useful. I encountered this at work and you save me.

tomthanhswe

Hey Ben, immer is a good library, but need to mention that it doesn't work in IE11 and there is no way to polyfill it since it's based on JS Proxy.

xitman

This might be outdated, but I'm using Immer for the first time and mutating the draft object NEVER causes a re-render for any of my functional components. I'm using useSelector. Why is this?

Android

Random question, but is there any reason why you can't make a copy of todos yourself and modify the copy then return the copy instead of pulling in a library for that? That way you can do what you want and you aren't modifying the state. For example:

const todosReducer = (todos, action) => {
const state = todos.slice();
switch (action.type) {
case "ADD_TODO":
state.unshift({ text: action.text, complete: false });
return state;
case "TOGGLE_COMPLETE":
state[action.i].complete = !state[action.i].complete;
return state;
case "RESET":
return [];
default:
return todos;
}
};

Cheers for the vids, enjoying them (learning react atm)

mr

I have one question, redux has one hook called useSelector, so if i use that, can i stop using reselect, are both doing same ? do useSelector give the same performance ?

creative-commons-videos