Questions tagged [use-reducer]

For questions regarding the `useReducer` hook in React. `useReducer` is an alternative way to manage complex state by defining a reducer function that creates the next state based on the current state and a dispatched action.

495 questions
2
votes
1 answer

Next.js persistent state with React hooks and localStorage

I'm trying to create persistent state with localStorage and React hooks in Next.js SSR app and everything seems to look good but when I reloade page after update my data I'm getting error: Warning: Text content did not match. Server: "0" Client:…
Klaudiusz
  • 41
  • 1
  • 4
1
vote
1 answer

Is it possible in Next.js to pass data from getStaticProps to contextProvider and set it as default useReducer value?

In my pages/index.js there is getStaticProps function which fetches list of articles (I'm creating a blog website) which is then used as an init value of my useReducer that is located in the same file. I'm using useReducer to do some basic sorting…
granex
  • 11
  • 3
1
vote
1 answer

"No overload matches this call" error when setting up Context API on React

When setting up the Reducer using Context API, I get a "No Overload Matches this call" error on the initialState parameter of the useReducer function. I thought it was because the return type of the mainContextReducer function was incorrect however…
1
vote
1 answer

UseReducer dispatch getting called twice

I have the following piece of code and the usereducer disptach method is getting called twice. I read up on this and removed the strict mode from index. Now the method is called and run properly but the UI is not getting rendered with the updated…
Philomath
  • 1,145
  • 4
  • 18
  • 28
1
vote
0 answers

React useReducer is being called twice on each dispatch

I have this code which seems to be executing each dispatch of the useReducer twice for some reason I don't get to resolve. I have tried to solve it by moving userReducer out of the component, but the results were the same. At this point I don't know…
Germán
  • 1,007
  • 1
  • 7
  • 20
1
vote
2 answers

React calculator, which uses userReducer hook for operation, not working. Numbers not displaying

I am making a calculator using the useReducer hook in React. I have made the useReducer hook to carry out all the operations, and the digit /operation buttons, on the calculator keyboard, are replaced by components which call the reducer. I am…
K E
  • 31
  • 4
1
vote
1 answer

Invalid number of arguments in useReducer

export function React.useReducer<(state: PasswordResetFormState, action: PasswordResetAction) => PasswordResetFormState,PasswordResetFormState>reducer: (state: PasswordResetFormState, action: PasswordResetAction) => PasswordResetFormState, …
Legand
  • 21
  • 3
1
vote
0 answers

Firebase Authentication using contextAPI and useReducer hook

I'm creating a shopping cart with both auth and cart functionality using firebase , so on the register functionality it throws no error at the console but its not registering as well Here is my authReducer content together with the initialState…
1
vote
1 answer

State variables in useState & useReducer are not able to read values in real time

I have built a simple login/signup page in React. I have two states in my component. inputs & errorState. I am not able to use the real time values of errorState object & logically decide whether to invoke axios sendRequest or not. If you can see…
Balaji KR
  • 73
  • 8
1
vote
0 answers

Redux: how to combine reducer taking asynchronous action with normal reducer

Redux newbie here. I have an reducer ProductListReducer that takes asynchronous action (its action creator fetch data from API), whose initial state is InitialProductListStates. I have another synchronous reducer CartReducer, whose initial state is…
Darius Huang
  • 13
  • 1
  • 2
1
vote
3 answers

Prevent useEffect from firing twice with useReducer when using StrictMode

I'm using React's Strict mode, and I'm having a useEffect that is causing me some headaches. Part of React's Strict mode is that those things can fire twice, so I'm writing code to protect myself from that. However I seem to be missing something…
Anemoia
  • 7,928
  • 7
  • 46
  • 71
1
vote
1 answer

overloading payload in useReducer hook, TypeScript

Here is my useReducer hook initialized in Function Component. In listReducer function I want to create user ==> I assign to state an array of type User. So, in payload I have to have User[]. But, when I delete ==> only single element of them by _id…
Paul Gutsal
  • 107
  • 2
  • 12
1
vote
1 answer

React contextAPI fetch not updating state

I'm using contextAPI and trying to fetch data and update state using action and reducer, but the state is not getting updated im using fetch inside useEffect and after fetch i dispatch type GET_EMPLOYEES AuthContext.js import AuthReducer from…
aasem shoshari
  • 190
  • 2
  • 14
1
vote
0 answers

×I get :× TypeError: Cannot read properties of null (reading 'useReducer')

I get the "× TypeError: Cannot read properties of null (reading 'useReducer')" when I use the following code: import React, { useReducer,useContext, useEffect } from 'react'; const [{ loading, error, order, successPay, loadingPay }, dispatch] = …
1
vote
1 answer

useReducer confusion as to why is dispatch needed?

After studied both useState and useReducer, I am confused by useReducer's code, so reducer takes two argument (state, action), is the state same as the initialState, if so why use two different names? Second, useReduer takes two arguments (reducer,…
jimzhou
  • 41
  • 1
  • 1
  • 8