How can I make the documentations example of useReducer which is receiving all 3 values work?

Question

Trying to make it work I tried many ways, I just can't understand how the "init" works, how can I add any value to it so the application can run?

Here is a example of what I'm trying to do:

import { useReducer } from "react";

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

export function Counter() {
  return (
    <>
      <CounterFunction />
    </>
  );
}

You dont need to specify init there, you can just use `useReducer(reducer,initialCount)`, if i remember correctly, init is there as curried function, that can be used in action for setting initial data — Wraithy, Nov 01 '21 at 13:07
I was testing the third so i would know how it works when I need it, but yeah i already had tested that, it works fine the way you said it, i just want to make the code work with all three entries — MestreALMO, Nov 01 '21 at 15:52

score 0 · Answer 1 · answered Nov 01 '21 at 13:12

0

what you are currently doing is lazy initialization. It lets you manipulate the initial value of useReducer before passing it. If you want, you can skip it all and just write the initial state for the reducer (can be anything like string, number or object, after all its very similar to useState but with the ability to easily setting it by passing the type of change (action) ).

Example: useReducer(dispatchHandler, {name: "hello"})

answered Nov 01 '21 at 13:12

MrCeRaYA

581
4
6

That I did, I know it works, I just can't make it work with the third value being used, the point of the app was testing the value so when I need to use the third value I can, that is what I was aiming to do. the code on the topic is copied from the documentation, but I can't make it work – MestreALMO Nov 01 '21 at 14:27

score 0 · Accepted Answer · answered Nov 01 '21 at 17:02

The code was lacking initialCount={0} when the CounterFunction is called, so the full code solution will be below:

import { useReducer } from "react";

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

export function Counter() {
  return (
    <>
      <CounterFunction initialCount={0} />
    </>
  );
}

How can I make the documentations example of useReducer which is receiving all 3 values work?

2 Answers2