Does one element in the array update the render in React for other elements in the array?

I am using React with Redux for my current project.

I have a state object, for example:

state: {
    reducerOne: {
         keyOne: valueOne,
         keyTwo: valueTwo
    }
    reducerTwo: {
         keyThree: valueThree
         keyFour: valueFour
    }
}

Suppose that valueFouris an array of objects. I use an array valueFourto mapbundle React elements like this in the rendering method:

this.props.valueFour.map(()=> <div/>)

(Obviously this is simplified, but all I'm trying to point out is that I'm passing a bunch of elements)

Now I would like to update only 1 of the above items. In my action / reducer code, I return the entire valueFour array with 1 element updated in such a function:

action code

export function updateThingInArray(elementId){
    return (dispatch, getState) => {
        const myArray = getState().reducerTwo.keyFour
        for (let i=0; i < myArray.length; i++) {
           if (myArray[i].id === elementId){
               const result= [
                    ...myArray.slice(0,i),
                    Object.assign({},
                       myArray[i],
                       {field:newValue}),
                    ...myArray.slice(i+1)
               ]
               dispatch(update(result))
           }
        }
     }
}

gear code:

export default handleActions({
  [UPDATE]: (state,{payload}) => Object.assign({},state, {keyFour: payload})
},{
  keyThree:{},
  keyFour:{}
})

(My reducer code uses library reduction actions)

Hope this all makes sense. If he does not ask, and I will clarify.

, keyFour Array, , , 1 ? , , ?

+4
1

, , . chrome, html, , , . , html , remove .

: , , React only : https://facebook.imtqy.com/react/docs/shallow-compare.html

+2

Source: https://habr.com/ru/post/1623483/


All Articles