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
3
votes
2 answers
Dispatcher does not seem to dispatch state from context
In my React Native app, I have a screen which connects to a server to retrieve an access token; when the token is received, I want to show different content.
So far the component for this screen looks like this:
import {AppContext} from…

Sharon
- 3,471
- 13
- 60
- 93
3
votes
1 answer
React useReducer - update array of objects
I want to use React.useReducer to update state. My state is an array of objects. When update action is triggered, not only value from desired index is updated but all of them. I want to have updated only the value from indicated array index. How…

Zaharskyy
- 99
- 3
- 10
3
votes
4 answers
useReducer: dispatch action, show state in other component and update state when action is dispatched
I have a problem which I can't figure it out. I'm building an ecommerce react app and using useReducer and useContext for state management. Client opens a product, picks number of items and then click button "Add to Cart" which dispatches an action.…

stex
- 33
- 1
- 5
3
votes
1 answer
Advise about the reduction of the amount of React useState hooks
I am trying to build my very own first project that is relatively large, at least for my level of experience anyway.
I am heavily relying on useContext in combination with useStates hooks to handle the logic between my different components, as time…

Georgi
- 65
- 5
3
votes
1 answer
React's reducer returns unexpected state that is not consistent with logged value
I created a reducer that increments a global UID on every dispatch with the action increment. The initial value of the UID is 0.
Expectation:
I expected that the UID is incremented by 1 on every dispatch.
Reality:
The UID increments by 2 and the…

Codehardt
- 43
- 4
3
votes
1 answer
useReducer in Context consumer does not update after change in some locations
I added a context that contains a useReducer hook to my Ionic React app. I'm seeing some strange behavior: when I update the context value with a dispatch call, then a consumer component will be updated on the page, but the exact same component on…

Patrick Kenny
- 4,515
- 7
- 47
- 76
3
votes
1 answer
React useReducer empties initialState
i'm trying to use some data fetched by axios inside initialState so I can use it with useReducer later on. but as soon as I pass it as the initialState of my second argument it returns an empty array with no objects. please help... :(
const [prods,…

Whateverneveranywhere
- 33
- 1
- 7
3
votes
1 answer
Context - dispatch is not a function (React)
Very new to context and reducers in React. I am currently trying to use Context to get a date string from an event on a Line Graph. The line graph I'm using is from react-chartjs-2.
My context is setup and provided as below:
export const Context =…

Malkeir
- 113
- 7
3
votes
3 answers
TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))
I tried running this code, but it's giving me a runtime error saying
TypeError: Object is not iterable (cannot read property
Symbol(Symbol.iterator))
here is the code.
import React, { useContext} from "react";
import { GlobalContext } from…

Paschal
- 141
- 2
- 3
- 8
3
votes
2 answers
Prevent Modal Rerendering when only Modal Content Change: React Hooks useReducer
I have a parent-child component Modal and ModalContent in my React App both functional.
1) I have created an AppContext in App.js for accessing it globally in all components.
const [state, dispatch] = useReducer(reducer, {modalOpen: false, content:…

nikhil024
- 435
- 5
- 19
3
votes
1 answer
React hook useRender called twice if bailing and setting state afterward
I'm not sure if this is expected behavior, but if you bail out of a dispatch (https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-dispatch) while using the useReducer hook, the action occurs twice if it's followed by a render. Let me…

webbyweb
- 385
- 2
- 11
3
votes
2 answers
useReducer returning a promise instead of the updated state
My reducer:
export const initialUserState = {
username: '',
address: '',
token: '',
address: '',
loggedIn: false,
loaded: false,
};
export const userReducer = async (state, action) => {
try {
switch (action.type)…

bruxo00
- 135
- 1
- 2
- 12
3
votes
1 answer
reducer function is being called twice
I am practicing React hooks and encountered an issue with useReducer and dispatch functions. The reducer function that I created is being called twice when I'm clicking on either buttons on the SECOND time onwards. My console log output is printed…

Saro
- 810
- 2
- 12
- 22
2
votes
1 answer
Dispatch undefined. "notifContext.dispatch is not a function."
I have a context.js file:
import React, {useReducer} from 'react';
export default (reducer, actions, defaultValue) => {
const Context = React.createContext();
const Provider = ({children}) => {
const [state, dispatch] = useReducer(reducer,…

jdez
- 189
- 1
- 10
2
votes
1 answer
React app page routing issue post successful user login
I have a react app where I use the useContext and useReducer hooks for the login and storage. While the login part works, what I want achieve is to redirect user to a specific page post successful login. I am using react-router@6 and tried to use…

Dev
- 177
- 1
- 5
- 15