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
1
vote
1 answer
useEffect infinite loop occurs only while testing, not otherwise - despite using useReducer
I'm trying to test a useFetch custom hook. This is the hook:
import React from 'react';
function fetchReducer(state, action) {
if (action.type === `fetch`) {
return {
...state,
loading: true,
};
} else if (action.type ===…
Des
- 393
- 4
- 5
1
vote
1 answer
React useReducer: Payload is received, state not updated
I am using this article to help with using the useReducer hook.
I have created this context component because I am using the react-leaflet routing machine to create markers for the route and I'd like to save the latitude and longitude in local…
Antonio Pavicevac-Ortiz
- 7,239
- 17
- 68
- 141
1
vote
1 answer
Error In Reducer . initialState . How i can initialize state and use action.type
i am trying to set logged in user . using reducer.
Errors are :
Unexpected token && Syntax Error
Error on line switch(action.type)
or error in brackets not properly closing i do not know
either it will use : or = in reducer initialize and in…
user10
- 15
- 6
1
vote
0 answers
I want to make Todo using local storage as a hook
I am studying reaction-hooks. I'd like to ask for help in the process of creating todo-list.
When input.value enters local storage, local storage enters list, when clicked, changes status to done and recognizes status to enter class.
Currently, only…
ohhayo
- 11
- 1
1
vote
1 answer
why does my reducer hook ignore my if statment?
when running my reducer dispatch method here:
function reducer(state, action) {
switch (action.type) {
case "updateBox":
return state.map((input, index) => {
input.map((data, NextIndex)=>{
if (action.NextIndex === NextIndex) {…
Alexander Hemming
- 753
- 1
- 6
- 28
1
vote
2 answers
Deduplicate React Reducer content
I have some reducers that are similar, receiving same action, how can I deduplicate the code below?
const gridApiReducer = (state: GridApi, action: { type: string; value: GridApi }) => {
switch (action.type) {
case "UPDATE":
…
appletabo
- 239
- 2
- 12
1
vote
1 answer
How can I take out the elements of the arrangement one by one? within div in Reactjs
This is being made from React-Hooks
I want to show the elements of the arrangement one by one.
I want to be expressed in the overall result. (As a result, is at the bottom.)
Perhaps what I want is to 'reduce this lot of code'.
What should I…
eeez kim
- 175
- 1
- 3
- 15
1
vote
1 answer
Reducer in deeply nested state
I've been trying to come up with a useReducer for a deeply nested state for a while.
const initialState = {
typeOfMeal: "breakfast",
protein: "",
carbs: "",
fat: "",
mainPhoto: "",
platePhoto: "",
ingredients: [
{
…
BetaHydroksyMaslan
- 13
- 3
1
vote
1 answer
Make a "DeleteTransaction" case and remove an item from the state using filter
I want to make a DeleteTransaction case and remove an item from the state using filter.
My current code is below:
const TransactionReducer = ((state, action) => {
switch(action.type){
case "AddTransactions": {
return…
Amir Shahzad
- 73
- 1
- 6
1
vote
1 answer
React Hooks useReduce or useState
I have a form with 30 fields and all those fields are a template from a value in a dropdown, if I change the value of the template I will end up creating a custom template.
So the action is:
When we are changing a value from the form, the template…
Robert
- 554
- 5
- 13
1
vote
1 answer
React useReducer don't update state in React context
React useReducer don't update state in React context. But in return section state data render correctly. Here is sample:
context.js
const globalContext = React.createContext();
const initialState = {
statuses: null,
};
const globalReducer =…
Twist
- 235
- 4
- 10
1
vote
0 answers
I am not able to find what is the problem with the code. ERROR: TypeError: dispatch is not a function
Error says Inside TodoForm component dispatch is not a function. I have tried but not working. dispatch is a function from App component.
const reducer = (state, action) => {
switch (action.type) {
case ACTIONS.ADD_TODO:
return…
Kisan Kumavat
- 97
- 1
- 7
1
vote
0 answers
React useReducer hook and functional component lifecycle guarantees
I'd like to confirm an assumption I am making about functional components and useReducer. From my understanding useState is useReducer under the covers so I'll use useState in this example to simplify.
function Example(){
const [count, setCount] =…
nathanwinder
- 87
- 6
1
vote
1 answer
How to make api call in useReducer?
Here's a class component I'd like to refactor to a functional component using useReducer
export default class FootballMatchesData extends Component {
constructor(props) {
super(props);
this.state = {
selectedYear: null,
…
ln09nv2
- 965
- 4
- 19
- 35
1
vote
1 answer
reducer - update the complete state
I want to add a case to the reducer where i want to set the complete state , not any specific attributes.
updating specific attributes[SET_SELECTED_PAGE,UPDATE_MESSAGE_DISPLAYED] are working fine. But when i try SET_INIT_DATA i get error Parsing…
upog
- 4,965
- 8
- 42
- 81