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
0
votes
1 answer

A property of the state changed by useReducer() is never displaying changes even when those are dispatched

I have been working with useReducer() so that I can share some state among some components. There is a property in the requestReducer called isLoading which default/initial state is set to false. There are two functions dispatching actions to the…
0
votes
1 answer

Using useReducer to update state

I am trying to learn react and I am always a bit confused about when react updates the state. In the following application I have a counter with plus and minus buttons and I want the counter to have one styling when the number is positive and a…
samgon
  • 9
  • 1
  • 2
0
votes
2 answers

useEffect not triggering re-render when it's being used with useReducer

I can't trigger re-render even the state has changed. PageContainer calls loadPage and loadPage updates state without any inssue. But when the state has changed it dose not trigger re-rendering. It only shows inital state(pageName.loginPage). My…
Peter
  • 301
  • 4
  • 17
0
votes
1 answer

Updating useState inside useReducer? Also my reducer is firing twice at the first dispatch called

EDIT: Link to CodeSandbox. Bug can be reproduced by clicking on any of the notes on the guitar or buttons on the TabBar. You will see the consol.logs appear twice the first time and once after. I'm working on a project as a way to learn React. It is…
JonLunde
  • 151
  • 1
  • 3
  • 10
0
votes
0 answers

React useReducer not picking up new dispatched values from other component

I am trying to use a reducer to update a progress bar on a React/ Typescript app I am building. I am using the useReducer hook. I have a progress bar that sits in the header which I am trying to get to 'listen' to the reducer state and rerender with…
James
  • 2,800
  • 7
  • 45
  • 81
0
votes
1 answer

Define reducer inside the component function?

Is it a valid and safe to define a reducer function inside the components' function (render phase)? const Component = () => { // is this okay to be here or should be outsite the function? const reducer = (state, action) => { // do stuff …
mockingjay
  • 181
  • 1
  • 10
0
votes
1 answer

How to separate a series of objects from the object

I'm using a useReducer And this is what I have: const initialState = { optionalFilter: { take: Math.round((window.innerHeight - 330) / 34), page: 1, }, reportFilter: { searchItem:[], dateFilter: { …
zahra zamani
  • 1,323
  • 10
  • 27
0
votes
2 answers

ReactJS incrementor++ not working inside useReducer

I have a simple useReducer increment counter. import {useReducer} from 'react' const counterStateFn = (state,action) => { if(action.type === "INCREMENT") { return {count : state.count++} } if(action.type === "DECREMENT") { return…
Rejin Jose
  • 41
  • 6
0
votes
1 answer

useReducer to edit forms with mapped data

Alright all of you React Pros out there. I have been struggling to wrap my head around this one for a while now. I have a database that has an array of objects that have arrays nested inside of them. Initial state looks something like this... const…
0
votes
0 answers

Return data from Callback within Reducer

I have the following problem in a React Context: import * as React from 'react'; export const Context = React.createContext(); function reducer (state, action) { switch (action.type) { case 'set': { …
Meatgear
  • 119
  • 1
  • 5
0
votes
0 answers

React: Comparing mount event with useEffect vs useReducer

I know the useEffect hook with an empty dependency array is the equivalent (but not the same) to the componentDidMount life cycle hook. I also know that useEffect should include all dependencies in the array, which may or may not cause additional…
Magnus Bull
  • 1,027
  • 1
  • 10
  • 21
0
votes
0 answers

Is it bad practice to nest switch statement ls in react's usereducer hook? What are preferred alternative methods?

I've been working on a react application lately and I'm using a big usereducer function to hold the global state. I've been trying to use a sort of state machine pattern where I case on a string constant which is a name for the current state. Here's…
0
votes
0 answers

How to use useReducers & react-router-dom

I'm trying to do some work using the useReducer hook and react-router-dom. I have 2 pages; 1) Home 2) Details. Using the react-router-dom to navigate between 2 components. The details are added to the details page. In the submit action of the…
simpywatch
  • 43
  • 5
0
votes
0 answers

Reactjs updating a nested array inside an array of objects with useReducer

I am having a bit of trouble and think I must be making a silly mistake that I cannot see. I am trying to make a function inside of my useReducer reducer function which updates a todo.complete value to be either true or false (this is called when…
Greg
  • 35
  • 1
  • 2
  • 6
0
votes
3 answers

Dispatchs fire together inside UseEffect with Async function

There is a Profile component that creates a 3D face using an async function. To inform the user to wait, two dispatches is fired before and after the heavy task inside the UseEffect. The problem is both of these dispatched only fire after the heavy…
Saeid
  • 83
  • 8