rofrischmann/alveron

# Action

Actions are used to update the state in a predictable way.
Actions are so-called reducers. They take the previous state and a payload and reduce those to the next state.
Actions are the single source of truth in terms of state updates. This pattern is also known as unidirectional data flow.

```
type Action = (prevState: any, ...payload) => [newState: any, effect?: function]
```

> **Note**: Actions may also return an optional second item. Read more about [effects](concepts/effect).

## Principles

Since we [can't enforce immutability nor pure functions in JavaScript](intro/design-principles), here are some recommendations on how to write good actions:

- Do not mutate the current state, but rather use **immutable data structures**
- Ensure that all actions are **pure functions**
- All actions should have a **single responsibility**

### Pure Functions

A pure function should:

- given the same input, always return the same output
- not mutate the input in any way
- not cause side effects (e.g. API calls)

## Example

```js
// number primitives
const model = 0
const actions = {
  increment: (state) => [state + 1],
  decrement: (state) => [state - 1],
}

// arrays
const model = []
const actions = {
  addItem: (state, item) => [[...model, item]],
  removeItem: (state, item) => [model.filter((i) => i === item)],
  clear: () => model,
}

// objects
const model = {
  firstName: '',
  lastName: '',
}
const actions = {
  updateFirstName: (state, firstName) => [{ ...state, firstName }],
  updateLastName: (state, lastName) => [{ ...state, lastName }],
}
```