/Javascript/React/What does the useReducer do in react

What does the useReducer do in react

UseReducer

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

Source: reactjs.org

UseReducer

function init(initialCount) {  return {count: initialCount};}
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':      return init(action.payload);    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

Source: reactjs.org

What does the useReducer do in react

const [state, dispatch] = useReducer(reducer, initialState);

Source: css-tricks.com

Similar codes

2 votes105 views1 answer
How to do a classname variable and string react
Javascript React
0 vote116 views1 answer
Font awesome react share faShare
Javascript React
32 votes103 views5 answers
React disable eslint errors
Javascript React
0 vote101 views1 answer
How to draw a long underline in react native
Javascript React
1 vote112 views1 answer
Found page without a React Component as default export in
Javascript React
0 vote98 views1 answer
React useEffect() the side-effect runs after every rendering
Javascript React
0 vote111 views1 answer
What is the difference between throttling and debounce and raf throttling in react
Javascript React
24 votes102 views5 answers
How to change port in react js
Javascript React
-1 vote96 views2 answers
React native font based on viewport dimensions
Javascript React
-2 votes106 views1 answer
2 taps is required to close keyboad in react native
Javascript React