How to update single value inside specific array item in redux

Question

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

User · Answer

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

You create and spread new array from the old array up to the index you want to change.
Add the data you want.
Create and spread new array from the index you wanted to change to the end of the array

let index=1;// probabbly 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)

User · Answer

You can use map  Here is an example implementation   case  SOME ACTION      return              state          contents  state contents map              content  i    gt  i     1       content  text  action payload                                       content

User · Answer

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

User · Answer

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   gt  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

User · Answer

You don t have to do everything in one line   case  SOME ACTION     const newState        state      newState contents                newState contents 0          title  newState contnets 1  title  text  action payload           return newState

User · Answer

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

User · Answer

This is how I did it for one of my projects   const markdownSaveActionCreator    newMarkdownLocation  newMarkdownToSave    gt       type  MARKDOWN SAVE    saveLocation  newMarkdownLocation    savedMarkdownInLocation  newMarkdownToSave        const markdownSaveReducer    state   MARKDOWN SAVED ARRAY DEFAULT  action    gt      let objTemp         saveLocation  action saveLocation       savedMarkdownInLocation  action savedMarkdownInLocation         switch action type        case MARKDOWN SAVE        return           state map i   gt              if  i saveLocation     objTemp saveLocation                return Object assign     i  objTemp                         return i                          default        return state

User · Answer

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

[javascript] How to update single value inside specific array item in redux

Examples related to javascript

Examples related to reactjs

Examples related to redux