How to Update Single Value Inside Specific Array Item in Redux

How to update single value inside specific array item in redux

You could use the React Immutability helpers

import update from 'react-addons-update';

// ...    

case 'SOME_ACTION':
  return update(state, { 
    contents: { 
      1: {
        text: {$set: action.payload}
      }
    }
  });

Although I would imagine you'd probably be doing something more like this?

case 'SOME_ACTION':
  return update(state, { 
    contents: { 
      [action.id]: {
        text: {$set: action.payload}
      }
    }
  });

How to update single value inside array in redux

It seems that somehow I am mutating the state.

Correct you are mutating the state, because in js, variable always get reference of object/array. In your case item will have the reference of each object of the array and you are directly mutating the value of item.done.

Another issue is you are not returning the final object properly, also you need to return value for each map iteration otherwise by default it will return undefined.

Write it like this:

case "TOGGLE_TODOS": 
    return list.map((item) => (
        item.index===index? {...item, done: !item.done}: item
    ))

Or:

case 'TOGGLE_TODOS':
    const index = action.index;
    const newState = [ ...state ];
    newState[index] = { ...state[index], done: !newState[index].done };
    return newState;

Full Code:

export default function todoApp(state=[], action){
    switch(action.type){
        case 'ADD_TODO':
            return [...state, action.item];
        case 'TOGGLE_TODOS':
            const index = action.index;
            return state.map((item) => (
                item.index===index? {...item, done: !item.done}: item
            ))
        default:
            return state;    
    }
}

Check this snippet:

let list = [    {done:true, index:0},    {done:false, index:1},    {done: true, index:2}  ]
let index = 1;
let newList = list.map(item => (    item.index===index? {...item, done: !item.done}: item))
console.log('newList = ', newList);

Update single value in item array | react redux

You need to transform your todos array to have the appropriate item updated. Array.map is the simplest way to do this:

case "COMPLETE_TASK":
    return {
        ...state,
        todos: state.todos.map(todo => todo.id === action.id ?
            // transform the one with a matching id
            { ...todo, completed: action.completed } : 
            // otherwise return original todo
            todo
        ) 
    };

There are libraries to help you with this kind of deep state update. You can find a list of such libraries here: https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md#immutable-update-utilities

Personally, I use ImmutableJS (https://facebook.github.io/immutable-js/) which solves the issue with its updateIn and setIn methods (which are more efficient than normal objects and arrays for large objects with lots of keys and for arrays, but slower for small ones).

Redux : update an item in an array of objects

Try this:

export default (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TO_CART':
      return state.map(product => {
        if (product.name === action.payload.name) {
          return {...product, quantity: product.quantity-1}
        };
        return product;
      });
    default: return state
  }
}

The reason is you have to return a new state object derived from the current state reflecting the desired changes according to the requested action. See Redux Reducers for more details.

How to update an array using redux reducer, I want to change a boolean property inside an array of objects to make i true or false

You can using map like this:

const myFavorite = (state = initialState, action: ActionInter) => {
  switch (action.type) {
    case ADD_TO_FAVORITE:
      return {
        ...state,
        allAds: state.allAds.map((item, index) => {
          return action.payload.id - 1 === index
            ? {
                ...item,
                isFav: !item.isFav,
              }
            : item;
        }),
      };
  }
  return state;
};

How Do I Update a Property in Array of Objects using Redux Reducers?

You can just do

  setPlayerTextSlice: (state, action) => {
      const player = updatedArr.find(
        (obj) => obj.id === action.payload.id
      )
      if (player) {
        player.text = action.payload.text
      }
    },

the rest of your code is actually not required.

You can call it with dispatch(setPlayerTextSlice({ id: 5, text: "foo" }))

How to update state (array of objects) with incoming object in Redux?

I changed your action to use the payload property, but if you want you can remove it. (It's more proper to have it)

const reducer = (state, action) => {
  switch(action.type) {
    case 'UPDATE_OR_INSERT':
      return {
        data: [
          ...state.data.filter(x => x.id !== action.payload.id),
          action.payload,
        ]
      }
     default:
  }
  return state;
}

console.log(
  reducer({
    data: [
      {id: 1, number: 100},
      {id: 2, number: 200},
      {id: 3, number: 300},
      {id: 4, number: 400}
     ]
    }, { type: 'UPDATE_OR_INSERT', payload: {id: 2, number: 250}}));

How to update single value inside specific json array item using redux (Flatlist item click)?

I don't know if this is exactly what you are trying to achieve, but i'll give it a try.

//call Action 
this.props.listItemClick('RAJ',false});

//Action
export const listItemClick = (user,status) => {
    return {
        type: LIST_CLICK,
        payload: { user, status }
    };
}; 

 export default (state = INITIAL_STATE, action) => {
     switch (action.type) {
        case LIST_CLICK:
            //replace YOUR_DATA with your state var 
            return {...state, YOUR_DATA: [state.YOUR_DATA.map((val,index) => {
                   if (val.name === action.payload.user) {
                      return { ...val, status: action.payload.status };
                   }
                   return { ...val };
            })]};
        default:
            return state;

    }
};

---

Related Topics