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
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…
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"], …
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…
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