Tengo una función que se ejecuta en una matriz de objetos para encontrar el objeto que necesitaba modificarse y modificarlo.
Por ejemplo, tengo esta función:
doSomething(state,payload){ return state.map((item)=>item.name === payload.name ? {...item, foo:[...item.foo.map((innerItem)=> ({ ...inerItem,bar:payload.value }) )] } : item) } doSomethingElse(state,payload){ return state.map((item)=>item.name === payload.name ? {...item, bar:payload.value} : item) }Creo que aquí tengo un código redundante, pero no sé cómo extraer el código duplicado a una función y usarlo allí.
Creé un ejemplo de código: https://codesandbox.io/embed/js-playground-forked-tuz2p?fontsize=14&hidenavigation=1&theme=dark
EDITAR:
Espero usar una función que llame, por ejemplo changeColor(array, "bike", "frontWheel","red") y changeColor(array, "bike", "backWheel","red") y usaré el mismo código en su lugar de dos funciones separadas.
const changePrimaryColor = (state, payload) => { return state.map((item) => item.name === payload.itemName ? { ...item, colors: [ ...item.colors.map((color) => ({ ...color, primary: payload.value })) ] } : item ); }; const changeSecondaryColor = (state, payload) => { return state.map((item) => item.name === payload.itemName ? { ...item, colors: [ ...item.colors.map((color) => ({ ...color, secondary: payload.value })) ] } : item ); }; const changeFrontWheelColor = (state, payload) => { return state.map((item) => item.name === payload.itemName ? { ...item, wheelColors: [ ...item.wheelColors.map((wheelColor) => ({ ...wheelColor, backWheels: payload.value })) ] } : item ); };un ejemplo de código más simple: https://codesandbox.io/embed/js-playground-forked-tuz2p?fontsize=14&hidenavigation=1&theme=dark
const state = [ { name: "item1", foo: [ { fooX: "fooX1", fooY: "fooY1" }, { fooX: "fooX2", fooY: "fooY2" } ], baz: [ { x: "x1", y: "y1" }, { x: "x2", y: "y2" } ] }, { name: "item2", foo: [ { fooX: "fooX1", fooY: "fooY1" }, { fooX: "fooX2", fooY: "fooY2" } ], baz: [ { x: "x1", y: "y1" }, { x: "x2", y: "y2" } ] }, { name: "item3", foo: [ { fooX: "fooX1", fooY: "fooY1" }, { fooX: "fooX2", fooY: "fooY2" } ], baz: [ { x: "x1", y: "y1" }, { x: "x2", y: "y2" } ] } ]; /** * key = "foo" || "baz" * dimention = "x" || "y" */ const updateFn = (state, payload,key, dimention) => { return state.map((item) => item.name === payload.itemName ? { ...item, [key]: [ ...item[key].map((item) => ({ ...item, ...(key === "baz" && dimention === "x" && { x: payload.value } ), ...(key === "baz" && dimention === "y" && { y: payload.value }), ...(key === "foo" && dimention === "x" && { fooX: payload.value } ), ...(key === "foo" && dimention === "y" && { fooY: payload.value }) })), ], } : item ); }; console.log(updateFn(state, { itemName: "item2", value: 15 },"foo", "y"));const state = [ { name: "item1", foo: [ { fooX: "fooX1", fooY: "fooY1" }, { fooX: "fooX2", fooY: "fooY2" } ], baz: [ { x: "x1", y: "y1" }, { x: "x2", y: "y2" } ] }, { name: "item2", foo: [ { fooX: "fooX1", fooY: "fooY1" }, { fooX: "fooX2", fooY: "fooY2" } ], baz: [ { x: "x1", y: "y1" }, { x: "x2", y: "y2" } ] }, { name: "item3", foo: [ { fooX: "fooX1", fooY: "fooY1" }, { fooX: "fooX2", fooY: "fooY2" } ], baz: [ { x: "x1", y: "y1" }, { x: "x2", y: "y2" } ] } ]; const changes = (state, payload) => { return state.map((item) => item.name === payload.itemName ? { ...item, foo: [ ...item.foo.map((fooItem) => ({ ...fooItem, fooY: payload.value })) ] } : item ); } const changeFooY = (state, payload) => { return changes(state,payload); }; console.log(changeFooY(state, { itemName: "item2", value: 15 }));