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
2
votes
3 answers
What is the best way to filter data in React?
I'm building a catalogue of restaurants in the country. The API returns an array of objects, each one consisting of fields such as restaurantName, restaurantLocation, restaurantPriceRange.
I want to create a filtering component, which will reduce…
goodpixels
- 503
- 1
- 5
- 20
2
votes
2 answers
useReducer and useContext Dispatch doesn't work in onClick function
I'll spare you the broader context as it's pretty simple. Using React hooks, the first dispatch here fires automatically and works just fine, but the second one doesn't. Context is imported from another file, so I assume it's a (lowercase) context…
Michael Heilemann
- 2,627
- 4
- 23
- 28
2
votes
1 answer
Axios call in useReducer returning promise and not data
I am using useReducer in my context provider. The idea is that I will be a central place for my state and dispatch functions to live.
I am making an axios call to a datapase to fetch projects. However, when I return in the dispatch function, it is…
Mitchell Cartwright
- 181
- 3
- 11
2
votes
1 answer
Why is switch statement used in useReducer hook to manage state?
Let's take a look at the following 2 ways of using useReducer hook for state management, they both do the same thing: click add button to + 1 and click subtract button to - 1:
with switch:
const myReducer = (state, action) => {
switch…
one-hand-octopus
- 2,229
- 1
- 17
- 51
2
votes
1 answer
React useReducer not updating state
I'm using useReducer to update the errorsState when user logged in and failed. I've read many solutions and it was said that dispatch is async and I know that so I put console.log inside the useEffect to see the errorsState change, but unfortunately…
panji gemilang
- 759
- 2
- 10
- 25
2
votes
0 answers
React useReducer hook, how to handle multiple and unrelated types of actions?
I'm using React hook useReducer to manage the state of a cart-like application. My cartReducer is used to handing adding/removing/changing quantity of items:
// utils/reducers.js
export const cartReducer = (state, action) => {
switch (action.type)…
gremo
- 47,186
- 75
- 257
- 421
2
votes
0 answers
Async Actions With Custom Methods React UseReducers
I am trying to building a shopping cart utilizing the context API and the useReducer Hook, I have this functionality where the user need to click to a button to add an item to the shopping cart and the app will make an api request to add the item on…
AN Dev
- 31
- 1
- 1
2
votes
1 answer
React Hook is called in function "onSubmit" which is neither a React function component or a custom React Hook function
I have a form, and I wanted to call a hooks function usePostAddList() in the component AddList() inside the function onSubmit(). basically the usePostAddList() is to make a POST request.
Here's the code for the AddList():
AddList.jsx
export default…
panji gemilang
- 759
- 2
- 10
- 25
2
votes
1 answer
How to add a deeply nested object to a deeply nested Array in a React Reducer?
I have following React State:
state: {
objectOne: {
arrayOne: [
{
arrayTwo: [
{
value: 'some value'
}
]
}
]
}
}
I am using React…
user13841203
2
votes
1 answer
How to implement React useReducer for multiple state objects in a single provider
We have three related but separate gigantic state objects in one provider and aren't sure which way is better to implement useReducer.
We're in the middle of migrating to use useReducer and it would be hard to manage sticking them all in a single…
user13750925
- 21
- 3
2
votes
1 answer
Typescript reducer initial state and option argument for react component
I have a type for my reducer such as:
export type Style = {
color: string;
(rest...)
}
export const initialState: Style = {
color: 'blue';
(rest...)
}
I have a component that takes in a style object and the properties are optional and…
Adam Johnston
- 228
- 1
- 8
2
votes
1 answer
How to implement a react controlled input using useReducer?
My goal is to implement a React controlled input using the useReducer hook.
Inside the reducer I need the event.target.value and event.target.selectionStart to get the current value and caret position. So I've thought about sending the event as the…
cbdeveloper
- 27,898
- 37
- 155
- 336
2
votes
2 answers
Can I recreate the "reducer" for the useReducer hook on every render?
This is the example from: https://reactjs.org/docs/hooks-reference.html#usereducer
const initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case…
cbdeveloper
- 27,898
- 37
- 155
- 336
2
votes
1 answer
How to use useReducer along with Formik?
I have a file called Context.js in which I have a reducer. All of these are passed to other components using the Context API
const reducer = (state, action) => {
switch (action.type) {
case "SET_NAME":
return {...state, name:…
uber
- 4,163
- 5
- 26
- 55
2
votes
1 answer
How to access to new state of useReducer inside custom hook's function
I have a custom hook that uses useReducer.
function useMyCustomHook() {
const [state, dispatch] = useReducer(EntityReducer, initialState);
// console.log(state); // 1- state is up to date here
const customDispatch = (action) => {
…
Morteza Ebrahimi
- 740
- 1
- 8
- 20