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.
Questions tagged [use-reducer]
495 questions
0
votes
1 answer
Can't delete an item using useContext and useReducer
Please help guys. So I've started to learn about useReducer and useContext and I'm stuck at deleting an object. I've tried to log the result in the console and it prints the expected array that I want. However, when I return the array from the…
XypriL
- 129
- 1
- 1
- 9
0
votes
1 answer
React Testing Library with UseReducer & UseContext not updating state properly
I created a sandbox to outline the main points of interest:
https://codesandbox.io/s/restless-dawn-nwy0l
Please ignore the formatting as this is just a MWE I put together.
When I run the following test in the sandbox above
import React from…
lbragile
- 7,549
- 3
- 27
- 64
0
votes
0 answers
Object is of type 'unknown' from userReducer
I keep getting the error Object is of type 'unknown' from typescript for the currentUser state variable I have declared here:
const initialCurrentUserState: UserInfoObj = localStorageObject["userInfo"]
const [currentUser,…
JimmyTheCode
- 3,783
- 7
- 29
- 71
0
votes
2 answers
How to use useReducer to determine which useState variable to use?
This is probably a basic question but,
I have two useState variables:
const [varOne, setVarOne] = useState(null);
const [varTwo, setVarTwo] = useState(null);
And a third variable that tells me which variables I need to use, varOne or varTwo:
const…
Ken
- 1,155
- 2
- 19
- 36
0
votes
1 answer
from legacy state to useReducer nested elements React
i have this legacy code where we have height as an object with heightUnits nested inside it,
before we were changing the height like so
this.setState(prevState => ({
height: {
...prevheight,
[heightUnit]: heightValue
}
}));
and…
Asker
- 97
- 1
- 11
0
votes
3 answers
Alert appearing twice in react
Why this alert box is appearing twice in a simple useReducer Application,
Click here
for the codesandbox link,
To regenerate the scenario
increase the value of input using up arrow (Press only once)
decrease the value of input by down key (Press…
Shishir Tiwari
- 19
- 4
0
votes
1 answer
How type the interface as Dispatch?
I am trying to make an interface that has the dispatch function, but I am not using the Redux.
interface DispatchProps {
dispatch: (action: { type: string }) => void;
}
export function numberAddTwo({ dispatch }: DispatchProps) {
dispatch({…
Vagner Wentz
- 391
- 1
- 7
- 29
0
votes
0 answers
dispatch inside useEffect opposite result
I am displaying a foto in the front using Leigh Halliday's Image Previews in React with FileReader from https://www.youtube.com/watch?v=BPUgM1Ig4Po and everything is super BUT:
1.I want to get information from the image is displaying, exactly the…
Maykel Contreras Camacho
- 133
- 1
- 10
0
votes
0 answers
When I try to access the state information from the reducer, it says undefined
WHile I console.log state gives me information but when I try to get state._id info shows me undefined even I didnt use async and await in my reducer
shivam patel
- 3
- 2
0
votes
0 answers
How can I provider useReducer with Context API in React Typescript?
I am want to provider useReducer globally, but createContext() is asking for default value, which is throwing error if I assign null. I have tried assigning empty object instead of null. But I cannot access my userReducer if I do it this way.
import…
Sardorek Aminjonov
- 724
- 2
- 7
- 16
0
votes
2 answers
My reducer is triggered twice when I call it once. There something strange when I try to fix it
Here is my code.
The demo site is here.
On the demo web page, I have 2 buttons, 1 is the "go" button, the other one is the "Back" button. Suppose when I click on the "go" button, the present value will be shown in the console in the following…
The KNVB
- 3,588
- 3
- 29
- 54
0
votes
0 answers
axios delete operation with use reducer in react js
i am working on crud operation with context api and use reducer. i fetch data from an api and store it as initial value. but now i am confused how to delete a user from my fetched list. i made a remove function which works fine on manual refresh but…
hashmi44489
- 1
- 2
0
votes
1 answer
React useReducer state update with blank data and then new data within ContextProvider after dispatch ( causing 2 renders )
I'm using a context provider with useReducer in it,
const Project_settings_context = createContext()
...
export const SettingsProvider: FC = ({ children }) => {
const [loading, setLoading] = useState(true);
const…
Adharsh M
- 2,961
- 3
- 16
- 23
0
votes
1 answer
How do I add/remove from an array with the reducer within React Context?
import React from 'react';
import {useReducer, createContext } from 'react';
let initialState = {
associatedOrgs:[],
};
const reducer = (state, action) => {
switch (action.type) {
case "logout":
return initialState;
case…
Travis Brown
- 1
- 1
0
votes
2 answers
Typescript and Context API, Error: Rendered more hooks than during the previous render
I am trying to implement Typescript and Context API together in an application. In that case I am trying to make the Context API for the login.
This is the error what I get:
Error: Rendered more hooks than during the previous render.
I am not sure…
Bence Papp
- 13
- 1