Stack Overflow
Stack Overflow

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

React useReducer not updating object in array

Todos Component: import React, { useReducer, useState } from 'react'; import Todo2 from './Todo2'; export const ACTIONS = { ADD_TODO : 'add-todo', TOGGLE_TODO : 'toggle-todo' }; function reducer(state, action) { switch(action.type) { …
Robert
  • 10,126
  • 19
  • 78
  • 130
2
votes
2 answers

Show react reducer actions like redux devTool

I've created a reducer function using Reat's useReducer hook. function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count + action.payload }; case 'decrement': …
Sajeeb Ahamed
  • 6,070
  • 2
  • 21
  • 30
2
votes
0 answers

Typescript conditional causes error when stored in a variable

Can someone please explain why the first example works in Typescript, but the second example throws an error??? Here is a live example in a Typescript playground. const {type, payload} = action; switch(type) { ... //*** EXAMPLE 1 ***// case…
Skyler Knight
  • 131
  • 1
  • 6
2
votes
1 answer

useReducer state update doesn't rerender a useEffect in another component with it's dependency

I have a parent component which chooses the view to render according to a state in useReducer called state.viewOption. The child component which dispatches it is something like: export default function SearchFilter({ placeholder, onSearch }) { …
pepinillo6969
  • 423
  • 6
  • 15
2
votes
1 answer

How do I solve the type error "argument is not assignable to parameter of type never" for useReducer hook?

Hovering over the todos variable in my useReducer function here: const [state, dispatch] = useReducer(reducer, todos); gives the following type error. Argument of type 'TodoState[]' is not assignable to parameter of type 'never'. I've tried adding…
MiletX
  • 73
  • 1
  • 4
2
votes
1 answer

Typescript error TS2554: Expected 0 arguments, but got 1. while using useReducer and useContext with React

I have a number of useReducers and useContext where I am getting similar errors as the one listed below (TS2554). I have picked out the AuthReducer as it is the simplest. I get the same error for each Action dispatch. I've toyed around looking at…
user3927638
  • 101
  • 2
  • 5
2
votes
2 answers

dispatch with UseReducer and useContext hooks: dispatch does not exist on type {}

I'm trying to build a small Cesium app with React that can zoom to various places on the globe by clicking a button associated with each location. I'm working on setting up the reducer using the useContext and useReducer hooks, but I'm having an…
Andrew
  • 89
  • 2
  • 9
2
votes
0 answers

Best Practice: useEffect deps with setState or dispatch, via useContext or custom hook

I'm working on wrapping my head around all the best practices for dealing with the dependency array in useEffect(). First, some guidelines (from this blog post & elsewhere): If you're calling a function in useEffect that's only used within…
J23
  • 3,061
  • 6
  • 41
  • 52
2
votes
1 answer

Why my react app rendered twice and give me an empty array in first render when I'm trying fetching API?

The second render was success but the side effect is my child component's that using context value from its parent as an initialState (using useState hooks) set its initial state to empty array. I'm using React Hooks ( useState, useContext,…
Sedana Yoga
  • 43
  • 7
2
votes
1 answer

Generic Typescript Type + React hook

I have the following http hook: export const useHttp = (initUrl: string, initData: T) => { const [url, setUrl] = useState(initUrl); const [state, dispatch] = useReducer(fetchReducer, { isLoading: false, error: '', …
TheUnreal
  • 23,434
  • 46
  • 157
  • 277
2
votes
0 answers

Using state in axios interceptors

I'm trying to optimize performance of my app and was thinking about implementing axios interceptors. And trying to do so, I run into problem that I can not understand. Here is my App.js file: function App() { const Stack =…
Illya Yushchenko
  • 115
  • 1
  • 5
2
votes
1 answer

Accessing & Relying on Props inside useReducer an Anti-Pattern?

I have a component App() which takes some props, called data. That App component manages its state via useReducer. Depending on the state of my reducer, I show/hide certain data from the data prop. My reducer also calculate new state depending on…
antonwilhelm
  • 5,768
  • 4
  • 19
  • 45
2
votes
1 answer

React: Managing form state with a combination of useReducer and useState

The component I'm working on is a time input for a form. The form is relatively complex and is generated dynamically, with different fields appearing based on data nested inside other data. I'm managing the state of the form with useReducer, which…
bsluther
  • 45
  • 4
2
votes
2 answers

How to optimize in react js while working with useReducer, looped over state which is passed to child component

I am trying to create to To-Do list. function App() { return (
); } const { useReducer, useState } = React; const reducer = (state, action) => { return [...state, { id:…
Vijayashankar Aruchamy
  • 103
  • 2
  • 12
2
votes
1 answer

What is a better approach to stack multiple actions in reducer per render (React, useReducer)?

What is the best approach to using reduce logic from multiple actions per render? This example shows a basic example of my current solution (creating a new action that combines the logic), but there must be a better way. The basic example: I am…
David
  • 111
  • 4
1 2 3
…
32 33