155

I have an issue where re-rendering of state causes ui issues and was suggested to only update specific value inside my reducer to reduce amount of re-rendering on a page.

this is example of my state

{
 name: "some name",
 subtitle: "some subtitle",
 contents: [
   {title: "some title", text: "some text"},
   {title: "some other title", text: "some other text"}
 ]
}

and I am currently updating it like this

case 'SOME_ACTION':
   return { ...state, contents: action.payload }

where action.payload is a whole array containing new values. But now I actually just need to update text of second item in contents array, and something like this doesn't work

case 'SOME_ACTION':
   return { ...state, contents[1].text: action.payload }

where action.payload is now a text I need for update.

13 Answers 13

235

You can use map. Here is an example implementation:

case 'SOME_ACTION':
   return { 
       ...state, 
       contents: state.contents.map(
           (content, i) => i === 1 ? {...content, text: action.payload}
                                   : content
       )
    }
9
  • that's how I'm doing too, I'm just not sure if it's a good approach or not since map will return a new array. Any thoughts? Nov 18, 2016 at 16:32
  • 1
    @Ventura yes, it is good because it's creating a new reference for the array and a plain new object for the one intended to be updated (and only that one), which is exactly what you want
    – ivcandela
    Feb 13, 2017 at 16:13
  • 4
    I think this is best aproach Jun 2, 2017 at 21:16
  • 25
    I do this often as well, but it seems relatively expensive computationally to iterate over all the elements rather than updating the necessary index.
    – Ben Creasy
    Oct 17, 2017 at 21:39
  • 3
    It's not about memory cost. It's about not slowing your application by getting into an exponential loop
    – Ben Creasy
    Feb 14, 2021 at 1:48
77

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}
      }
    }
  });
3
  • indeed, do I need to include these helpers from react inside my reducer somehow?
    – Ilja
    Feb 25, 2016 at 14:24
  • 10
    Although the package has moved to kolodny/immutability-helper, so now it's yarn add immutability-helper and import update from 'immutability-helper'; Mar 2, 2017 at 23:57
  • 1
    My case is exactly the same, but when I update the object in one of the elements in the array, the updated value doesn't reflect in the componentWillReceiveProps. I use contents directly in my mapStateToProps, do we have to use something else in mapStateToProps for it to reflect? Sep 23, 2019 at 14:03
31

Very late to the party but here is a generic solution that works with every index value.

  1. You create and spread a new array from the old array up to the index you want to change.

  2. Add the data you want.

  3. Create and spread a new array from the index you wanted to change to the end of the array

let index=1;// probably action.payload.id
case 'SOME_ACTION':
   return { 
       ...state, 
       contents: [
          ...state.contents.slice(0,index),
          {title: "some other title", text: "some other text"},
         ...state.contents.slice(index+1)
         ]
    }

Update:

I have made a small module to simplify the code, so you just need to call a function:

case 'SOME_ACTION':
   return {
       ...state,
       contents: insertIntoArray(state.contents,index, {title: "some title", text: "some text"})
    }

For more examples, take a look at the repository

function signature:

insertIntoArray(originalArray,insertionIndex,newData)

Edit: There is also Immer.js library which works with all kinds of values, and they can also be deeply nested.

1
  • Heads up that slice, here, is O(n), so just as performant as mapping over everything
    – Jay K
    Jun 10, 2022 at 14:30
24

You don't have to do everything in one line:

case 'SOME_ACTION': {
  const newState = { ...state };
  newState.contents = 
    [
      newState.contents[0],
      {title: newState.contents[1].title, text: action.payload}
    ];
  return newState
};
2
  • 1
    You're right, I did a quick fix. btw, is the array fixed length? and is the index you wish to modify fixed as well? The current approach is only viable with small array and with fixed index.
    – Yuya
    Feb 25, 2016 at 14:14
  • 4
    wrap your case body in {}, since const is block scoped. Nov 9, 2017 at 8:52
8

I believe when you need this kinds of operations on your Redux state the spread operator is your friend and this principal applies for all children.

Let's pretend this is your state:

const state = {
    houses: {
        gryffindor: {
          points: 15
        },
        ravenclaw: {
          points: 18
        },
        hufflepuff: {
          points: 7
        },
        slytherin: {
          points: 5
        }
    }
}

And you want to add 3 points to Ravenclaw

const key = "ravenclaw";
  return {
    ...state, // copy state
    houses: {
      ...state.houses, // copy houses
      [key]: {  // update one specific house (using Computed Property syntax)
        ...state.houses[key],  // copy that specific house's properties
        points: state.houses[key].points + 3   // update its `points` property
      }
    }
  }

By using the spread operator you can update only the new state leaving everything else intact.

Example taken from this amazing article, you can find almost every possible option with great examples.

2
  • 5
    This looks like an object to me when OP wants to update an array
    – png
    Sep 23, 2020 at 1:59
  • Yep, doesn't really answer the question
    – Denny
    Oct 22, 2020 at 9:18
8

This is remarkably easy in redux-toolkit, it uses Immer to help you write immutable code that looks like mutable which is more concise and easier to read.

// it looks like the state is mutated, but under the hood Immer keeps track of
// every changes and create a new state for you
state.x = newValue;

So instead of having to use spread operator in normal redux reducer

return { 
  ...state, 
  contents: state.contents.map(
      (content, i) => i === 1 ? {...content, text: action.payload}
                              : content
  )
}

You can simply reassign the local value and let Immer handle the rest for you:

state.contents[1].text = action.payload;

Live Demo

Edit 35628774/how-to-update-single-value-inside-specific-array-item-in-redux

3

In my case I did something like this, based on Luis's answer:

// ...State object...
userInfo = {
name: '...',
...
}

// ...Reducer's code...
case CHANGED_INFO:
return {
  ...state,
  userInfo: {
    ...state.userInfo,
    // I'm sending the arguments like this: changeInfo({ id: e.target.id, value: e.target.value }) and use them as below in reducer!
    [action.data.id]: action.data.value,
  },
};

2

Immer.js (an amazing react/rn/redux friendly package) solves this very efficiently. A redux store is made up of immutable data - immer allows you to update the stored data cleanly coding as though the data were not immutable.

Here is the example from their documentation for redux: (Notice the produce() wrapped around the method. That's really the only change in your reducer setup.)

import produce from "immer"

// Reducer with initial state
const INITIAL_STATE = [
    /* bunch of todos */
]

const todosReducer = produce((draft, action) => {
    switch (action.type) {
        case "toggle":
            const todo = draft.find(todo => todo.id === action.id)
            todo.done = !todo.done
            break
        case "add":
            draft.push({
                id: action.id,
                title: "A new todo",
                done: false
            })
            break
        default:
            break
    }
})

(Someone else mentioned immer as a side effect of redux-toolkit, but you should use immer directly in your reducer.)

Immer installation: https://immerjs.github.io/immer/installation

1

This is how I did it for one of my projects:

const markdownSaveActionCreator = (newMarkdownLocation, newMarkdownToSave) => ({
  type: MARKDOWN_SAVE,
  saveLocation: newMarkdownLocation,
  savedMarkdownInLocation: newMarkdownToSave  
});

const markdownSaveReducer = (state = MARKDOWN_SAVED_ARRAY_DEFAULT, action) => {
  let objTemp = {
    saveLocation: action.saveLocation, 
    savedMarkdownInLocation: action.savedMarkdownInLocation
  };

  switch(action.type) {
    case MARKDOWN_SAVE:
      return( 
        state.map(i => {
          if (i.saveLocation === objTemp.saveLocation) {
            return Object.assign({}, i, objTemp);
          }
          return i;
        })
      );
    default:
      return state;
  }
};
1

I'm afraid that using map() method of an array may be expensive since entire array is to be iterated. Instead, I combine a new array that consists of three parts:

  • head - items before the modified item
  • the modified item
  • tail - items after the modified item

Here the example I've used in my code (NgRx, yet the machanism is the same for other Redux implementations):

// toggle done property: true to false, or false to true

function (state, action) {
    const todos = state.todos;
    const todoIdx = todos.findIndex(t => t.id === action.id);

    const todoObj = todos[todoIdx];
    const newTodoObj = { ...todoObj, done: !todoObj.done };

    const head = todos.slice(0, todoIdx - 1);
    const tail = todos.slice(todoIdx + 1);
    const newTodos = [...head, newTodoObj, ...tail];
}
1
  • findIndex also iterates the array though. In worst case (element is at the end) it iterates the whole array. And then you're doing iteration to create the head and tail arrays (as I believe that's how slice works), and then iterating again to spread them into the newTodos. I also think there's a bug, since the end parameter in slice is exclusive, you're losing an element by passing todoIdx - 1.
    – broken-e
    Sep 29, 2020 at 2:13
0

Pay attention to the data structure: in a project I have data like this state:{comments:{items:[{...},{...},{...},...]} and to update one item in items I do this

case actionTypes.UPDATE_COMMENT:
  const indexComment = state.comments.items.findIndex( 
    (comment) => comment.id === action.payload.data.id,
  );
  return {
    ...state,
    comments: {
      ...state.comments,
      items: state.comments.items.map((el, index) =>
        index === indexComment ? { ...el, ...action.payload.data } : el,
      ),
    },
  };
0

Note: in newer versions (@reduxjs/toolkit), Redux automatically detects changes in object, and you don't need to return a complete state :

/* reducer */
const slice = createSlice({
  name: 'yourweirdobject',
  initialState: { ... },
  reducers: {
    updateText(state, action) {
      // updating one property will cause Redux to update views
      // only depending on that property.
      state.contents[action.payload.id].text = action.payload.text
    },
    ...
  }
})

/* store */
export const store = configureStore({
  reducer: {
    yourweirdobject: slice.reducer
  }
})

This is how you should do now.

1
  • @Ilja by the way your object doesn't make sense.
    – vdegenne
    Dec 22, 2022 at 18:27
0

If you have an object type in you state array you can replace it by map with a condition like

reducers: {
    updateProject(state, { payload }) {
      state.projects = state.projects.map(origin =>
        origin.id === payload.id
          ? payload
          : origin
      );
    }
  },

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.