How does actions change the state?

I’m wondering How does actions change the state? Is it similar to redux? I’m looking at the counter example which is pretty simple but is it immutable?

actions: {
    down: state => ({ count: state.count - 1 }),
    up: state => ({ count: state.count + 1 })
  }

##Lets say an example like this

var state = {
  property: {
    propertyChild: [{
        city: 'New York'
      },
      {
        city: 'Santiago'
      },
      {
        city: 'Tokyo'
      }
    ]
  }
}

what if I wanted to change the second object in propertyChild?

what would be the proper way to update that?

[jorgebucaran]

@codingphasedotcom

I’m wondering How does actions change the state?

We wrap each action you pass to the app call in a function like this:

wrappedAction = function(someData) {
  var result = yourAction(state, actions, someData)
  return updateTheStateWith(result)
}

This way we can update the state every time an action returns. This in turn causes the UI to re-render. Note that in detail, this is more efficient than just re-rendering every single time. We only re-render the UI on the next browser repaint.

Is it similar to redux?

Yes, quite so.

I’m looking at the counter example which is pretty simple but is it immutable?

Yes, it is. The way we update the current state is by replacing it with a new state, never mutating the previous one.

[andyrj]

@codingphasedotcom I would recommend sticking with plain old JavaScript until you have to get into really nested state, at which point qim is a pretty nice library if you aren’t happy with immutability-helper. The default for return of an action is a shallow merge like @selfup said. It would be like redux only having 1 reducer that just does, state = Object.assign({}, state, actionResult). You could also change that with a custom resolve if you want different behavior.