/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 votes148 views2 answers
How to add multiple classes to a ReactJS Component
Javascript React
0 vote146 views1 answer
Run react android
Javascript React
12 votes154 views3 answers
Font weight react native
Javascript React
0 vote147 views1 answer
React string to integer
Javascript React
6 votes234 views1 answer
'useHistory' is not exported from 'react-router-dom'.
Javascript React
18 votes144 views2 answers
How to store an array in localstorage reactjs
Javascript React
18 votes140 views3 answers
How To Hide React Navigation Header in React Native
Javascript React
0 vote165 views1 answer
Navigation.openDrawer is not a function react native
Javascript React
0 vote170 views1 answer
Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap').
Javascript React
0 vote164 views1 answer
React unfocus check
Javascript React