Nested model reducer question

I’m unsure how to update just a part of a complex model and could not find any examples. This is a bit contrived, but what would the reducer look like that changes the name property on the “d” object. What’s the best practice for something like this? Thanks!

app({    
  model: { 
    a: {
        name: "a",
        b: {
            name:"b",
            c: {
                name: "c",
                d: {
                    name:"d",
                    e: {
                        name:"e",
                        f: {
                            name:"f"
                        }
                    }
                }
            }
        }        
    }
  },
  
  reducers: {
      changeDsName: (val) => ({ /* not sure what goes here */ }) 
  },
  
  view: (model, actions) => (
      <div>
          <button onclick={ _ => actions.changeDsName("g") }>Change D</button>
          <div>{ model.a.b.c.d.name }</div> 
      </div>
   )  
})

[FlorianWendelborn]

@cdeutmeyer Well, hyperapp only expects a new, modified model. So I’d say the question itself isn’t really related to hyperapp. It’s a question about this form of recursive data-structure.

I’d say answering that you need 2 things:

1. a cloning algorithm, since technically hyperapp reducers are supposed to be pure functions, which means that the model is immutable
2. an algorithm that iterates the object to find the spot that has to be changed

Funny thing is that coincidentally both of these algorithms are basically doing the same thing. I personally would use a function that you call recursively for all keys in the current sub-object you’re in. Then that function could either clone or modify its part and return the result.

If you don’t know what such a function would look like I suggest googling for “JavaScript object deep clone”. That’ll lead a ton of results and most of them will be recursive.

[jorgebucaran]

@cdeutmeyer This looks good.

From the docs:

Reducers return a new model or part of it. If it returns part of a model, that part will be merged with the current model.

So, HyperApp is doing Object.assign({}, model, newModel) for you already.

Your example:

changeGreeting : (model, g) => ({ greeting: Object.assign({}, model.greeting, { happy: g }) })

Is equivalent to:

changeGreeting : (_, g) => ({ happy: g })