how to useReducer

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>
    </>
  );
}

4. Links

React useReducer docs

how to useReducer

Comments

More from this blog

React Hooks: useLayoutEffect

6 Tips To Achieve Your Goal

How to Deploy Your App to Netlify

5 Ways To Host Your Applications

Array methods that you should know

1. Definition

2. Specifying the initial State

2.1. Basic

2.2. Lazy Initialization

3. Usage

4. Links

Command Palette

Comments

More from this blog

1. Definition

2. Specifying the initial State

2.1. Basic

2.2. Lazy Initialization

3. Usage

4. Links