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
1
vote
2 answers
Using useReducer to dispatch action from one child component and update state in another child component
Here is a CodeSandbox that has the example code below, and the linter highlights some of the issues: https://codesandbox.io/s/react-repl-bw2h1
Below is a basic example of what I'm trying to do. In a container component, I have a context AppContext…

rpivovar
- 3,150
- 13
- 41
- 79
1
vote
1 answer
How do I change my handle change and submit to reducer?
I've been trying to turn my authentication form submit to a reducer for 3 days and ive searched and read everything i could find and i found a partial answer for handle change but cant figure out how to do the handle submit function, ive seen how…

Ali Najdi
- 83
- 1
- 1
- 9
1
vote
2 answers
React Hooks - Context Provider is not immediately reflecting dispatched state
My Goal:
I'm creating a table that displays data to users. Based on a certain value stored in global state (stored in a reducer function that the context API provides to other components), I am fixing that header to the top of the page on scroll,…

Adam K
- 61
- 7
1
vote
0 answers
React App Sync Data with REST API After User Actions
Technology Information: ReactJS + Typescript for the frontend. REST API built with nodeJS+express that stores data in a Cloud Firestore database. The frontend React application retrieves data using the REST API.
State Management on the Frontend: I'm…

xyz123
- 191
- 1
- 3
- 6
1
vote
1 answer
Replace item in array with new value using dispatch in React
I've got an initial array, which can be added to and deleted from, no problems there..
const initialItems = [
{
id: Date.now(),
text: 'Get milk',
},
{
id: Date.now(),
text: 'Get eggs',
},
]
..but I'm…

bozo
- 25
- 3
1
vote
1 answer
How to properly use useReducer with useContext?
I have been trying to maintain my reducer in the same file as my Context provider. However, I have not been able to figure out how to consume it in a component file.
inside of my Context function:
const reducer = (state, action) => {
switch…

uber
- 4,163
- 5
- 26
- 55
1
vote
0 answers
Is it possible to manage the state using more than one reducers with react useReducer hook?
I am trying to get use to react hooks specifically useReduce, for this purpose I am making a todoList example in which I would like to use one reduce to manage the state for actions like adding, editing, updating, deleting and changing the…

Mario
- 4,784
- 3
- 34
- 50
0
votes
0 answers
sending opening/closing hours of business to sql database in Nextjs with useReducer
i hope everyone is doing fine.
im attempting to add the opening and closing hours of a restaurant into the database using nextjs.
the best way i could think of was to use useReducer(from react) in order to save state since every day has its own…

Tarek H Ghosn
- 1
- 1
0
votes
1 answer
UseReducer hook - Delete an item from array of objects
This is the data stored in the following reducer:
const[displayState, dispatchDisplayState]=useReducer(displayReducer,{
data:[], searchResultData:[], display:null
})
I'm trying to alter the state by removing a film (by ID) from the…

D. Rattansingh
- 1,569
- 3
- 19
- 30
0
votes
0 answers
React useReducer InitialArg not updating upon rerender
I have an App component, with navigation, rendering a sub-component - Main - that renders the full data of the selected navigation item. Once the first selection (navigation item) is made the state returned by useReducer never updates to the…

kalisjoshua
- 2,306
- 2
- 26
- 37
0
votes
0 answers
after returning a state not able to override the value of a cart with a new value in in react.js
I am completely new in react js and this is my first project. I have used Reducer to push item in cart but I am getting data in console but not able to in cart.
StateReducer.js
export const initialState = {
cart : ["react", "javascript"],
…

Prathama Redij
- 11
- 1
0
votes
1 answer
Defining Action type in useReducer
Here is a reducer used in React's useReducer
export const formReducer = (state: FormState, action: Action) => {
const { data, type } = action
switch (type) {
case 'updated_input': {
const { value, hasError, error, name, isFormValid }…

HelloWorld
- 10,529
- 10
- 31
- 50
0
votes
0 answers
Form Control React JS wont type in
I'm recently just using React.js.
Here's my question: I am really confused when I have a form that fetches from API and I want the value can update/type in for a new value.. but suddenly I cannot type but the value is changed e.g the old value is 4…

M Radhi Akbar
- 11
- 3
0
votes
1 answer
use dispatch from useReducer in useEffect - React
In react I'm trying to do a GET request on first render in a useEffect and then dispatch the response to update the useReducer state.
Here is the code:
const [{ firstTime, typeOfDev, technologies }, dispatch] = useReducer(
…

Simon
- 209
- 4
- 12
0
votes
1 answer
custom hook not reading value updated by reducer
I have a page with a Table, this table is controlled with other inputs which are put in common through a custom hook, I try to read the values in the hook in the page where the component is but although the values inside the hook are updated they…

Marcos Collado
- 41
- 1
- 16