how to useReducer
Furkan is a software engineer and frontend developer, whose main purpose is to create best optimal experience for user but also keeping the application or project as performant as possible.
He is deeply interested on web technologies and he is building new projects in this subject. He is especially familiar with React, Vue, Node and Java. You can check out what he built on his GitHub account. There is potential ways to connect with him at the end of this summary 👇
Things he like to do; ✔ Trying to solve other people's struggles ✔ Teaching or telling some subject he know to friends or colleagues ✔ Building different kinds of projects ✔ Meeting & talking with new people ✔ Listening podcasts ✔ Playing Chess ✔ Watching drama | sci-fi movies ✔ Listening music while I travelling or trying to fix problems ✔ Researching next generation technologies like cyptocurrency, IoT, smart devices
If you want to reach out with him, here is how you can do it;
🔼 Blog: https://blog.furkanozbek.com/ 🔼 GitHub: https://github.com/afozbek 🔼 Mail: abdullah.furkan.ozbek@gmail.com 🔼 Twitter: https://twitter.com/afozbek_ 🔼 Instagram: https://instagram.com/furkan.codes/
Thanks for reading ✨
1. Definition
useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.
It accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.
Here is the countReducer example;
const initialState = { count: 0 }
const counterReducer = (state, action) => {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
2. Specifying the initial State
There are two ways to initialized the useReducer state;
2.1. Basic
We can just give it as a second argument to useReducer call;
const [state, dispatch] = useReducer(
countReducer,
{ count: 0 } // second argument
);
2.2. Lazy Initialization
We can also initialize it lazily by giving it as a third parameter as a function;
const initState = (defaultCount) => ({ count: defaultCount })
const Counter = ({ counter }) => {
const [state, dispatch] = useReducer(
countReducer,
counter, // second argument
initState // third argument
);
// Rest of the component...
}
3. Usage
After we initialize it we just need to call dispatch functions that we are getting from useReducer hook and use it as a handler inside our elements.
React guarantees that dispatch function identity is stable and won’t change on re-renders.
const Counter = ({ counter }) => {
const [state, dispatch] = useReducer(countReducer, 0);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}
