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
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.…
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…
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,…
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:…
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…
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
1 2
3
32 33