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
When a check is checked, a button is shown
I'm using React and I have a list, and each item in the list with a check.
And I want that when there is at least one check in true, a button is shown (it is to delete all the checks).
I am using useReducer() to store the list.
This is my code,…
Josue Muñoz Avila
- 239
- 2
- 7
0
votes
0 answers
Combine React reducer hook with a shared reducer
Say we have a SharedReducer with the state being SharedState
We also have...
AReducer with the state being SharedState & AState
BReducer with the state being SharedState & BState
CReducer with the state being SharedState & CState
The overall state…
mfs780
- 9
- 2
0
votes
2 answers
how to flip state in usereducer react/ts
im trying to set up usereducer and i want to be able to flip the state of hasStarted (a boolean). im new to typescript and cant seem to figure out how to correctly implement it. here's my code (theres probably all sorts of things wrong with this…
IIIIIIIIII
- 3
- 1
0
votes
1 answer
Can't setup useReducer with React/TypeScript
I'm learning TypeScript. I'm trying to set up useReducer but I'm having a hard time doing it. The fix is probably fairly simple, so sorry for that. This is my App.tsx:
import React, { useReducer } from "react";
import { StartPage } from…
Yin Chu
- 121
- 1
- 8
0
votes
0 answers
Why the click handler is trigger twice for the first time?
My code is as follows:
import React,{ useReducer } from 'react';
import { Button, Col, Container, Modal, Row } from 'react-bootstrap';
export default function Click(){
let reducer = (state, action) => {
let result = { ...state };
switch…
The KNVB
- 3,588
- 3
- 29
- 54
0
votes
1 answer
How do I access data from useReducer(react) in other react-components?
How do I access the basket in other components like Navbar to show the contents of cart ?
And please correct me if there is any logical errors in the code.
Thanks in advance.
const cartReducer = (state, action) => {
switch (action.type) {
…
Siva
- 21
- 5
0
votes
0 answers
conditionally update state in useReducer
I have written a reducer.
export const reducer = (state, { type, payload }) => {
switch (type) {
case ACTION_TYPES.UPDATE_STATE:
return updateData({ state, payload });
default:
return state;
}
};
const updateData = ({ state,…
Aditi Sharma
- 35
- 4
0
votes
0 answers
Getting an error titled "Uncaught TypeError: Cannot read properties of undefined (reading 'cartFoodItems')" when clicking on my cart button
I am working on a food app that adds items to a cart then calculates the total amount. I am trying to implement a reducer as opposed to having multiple instances of state hooks and I am running into this error when trying to click open my cart…
mattangel
- 71
- 4
0
votes
0 answers
State Rendering Issues
I have a test application that essentially gives a set of questions and shows one question after another when you press the next button. Each time the stack of questions becomes one less. I have an issue with state and the state-consuming component…
Robert O'Toole
- 197
- 1
- 11
0
votes
1 answer
How can I log all properties of useReducer state consistently?
This will have something to so with async but I can't get to the bottom of it.
Problem: when I log my global state object to console, it is not returning all the properties. Despite the fact that the missing property can be logged to console…
thomasbishop
- 73
- 1
- 8
0
votes
1 answer
Form usestate within reusable modal component
I have a reusable modal component which I'm trying to use to take user input for updating their personal information.
The content of the modal is set from a useReducer hook like so;
const [modalState, modalDispatch] = useReducer(modalReducer, {
…
Sam Clay
- 13
- 6
0
votes
2 answers
React Hooks w/ Typescript
Yo, everybody! I'm just curious of how I got this to work but I really don't know why it works. Can any one give some techinical explanation?
import { createContext } from 'react'
interface IContext {
state: any
dispatch: any
}
export…
Fernando Soares
- 41
- 1
- 2
0
votes
1 answer
How to stop infinite loop when setting initial state from API with useReducer (React Hooks)
I am trying to set my initial state via useReducer. This data comes from an API, so I have placed it within useEffect and applied a dispatch method. (I need to use useReducer because I have more complex logic to come later.)This works however it…
thomasbishop
- 73
- 1
- 8
0
votes
0 answers
Promise async/await is not working - array not updated
I am updating an array addItems as soon a checkbox is clicked, using action/reducer and dispatch but when I check the array it is not up to date. to resolve this I have introduced async/await promises (I am new to promises) but when I check in then…
Samra
- 1,815
- 4
- 35
- 71
0
votes
2 answers
useReducer - keydown handler re-evaluates initial state on each render
https://codesandbox.io/s/suspicious-chebyshev-vy4mf2
I have a useReducer hook and useEffect with a keydown event handler. The issue is that on each re-render resulting from handling the keyboard button press, the component function re-runs the…
Karol Skrobot
- 450
- 3
- 19