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 ? , , ?