Cerebral - Part 4, Tags and operators
Tags: cerebraljs, javascript, react
Published: 2017-05-08 12:31:31

---
title: Cerebral - Part 4, Tags and operators
published: true
description: The intriguing use case of backticks.
tags: cerebraljs, javascript, react
canonical_url: http://blog.reflog.me/post/cerebral-part-4-tags/
---

In the previous part of this tutorial I've discussed how to update application state using **actions**.

We've implemented a simple function that used state's `get` and `set` methods to change the count variable.

```javascript
function changeCounter({props, state}){
  state.set("count", state.get("count") + props.param);
}

```

But doing this repeatedly for each state variable is incredibly redundant and I've been saying that Cerebral helps us write cleaner and more DRY code.

Let's say we add another variable to the state that tracks the previous counter value. Do we need to write another action to update it? Nope. There's a very clean solution for this.

# Tags and operators

Since alot of operations on state are common, i.e. update, delete, splice, check condition, etc, Cerebral provides a set of *operators* to simplify your code.

Let's see how we can use them.

We'll add a state variable called 'prevCount' and will copy the 'count' to it before each operation.

Here's how it's done (showing only the changes):

```javascript
import {set} from 'cerebral/operators'
import {state} from 'cerebral/tags'

...

state: {
    prevCount: 0,
    count: 0
  },
  signals: {
     changeCounter: 
     [
       set(state`prevCount`, state`count`),
       changeCounter, 
       logAction
     ]
  }

```

Let's break down what we see here:

1. No new functions were written

1. We import **set** operator and **state** tag

1. We add **set** to our signal chain and use the **state** tag to a) fetch current count b) set it to prevCount

Isn't that nice and clean?

(full code [here](https://www.webpackbin.com/bins/-Kip6DwFIyUtghbue9QH))

Anyone who's reading this file will have an immidiate understanding of what's going on, because the code reads like English:

<blockquote>When signal changeCounter is fired, do the following: set state prevCount to value of state count, then change counter and call the logAction.</blockquote>

This is what makes action chains with operators great.

And this is just scratching the surface.

Here are some examples of stuff you can do using operators and tags:

## Update lists

```javascript
import {merge, push, pop} from 'cerebral/operators'
import {state, props} from 'cerebral/tags'

export default [
  merge(state`some.object`, props`newObj`),
  push(state`some.list`, props`newItem`),
  pop(state`some.otherList`)
]

```

## Debounce queries

```javascript
import {set, debounce} from 'cerebral/operators'
import {state, props} from 'cerebral/tags'
import makeQueryRequest from '../chains/makeQueryRequest'

export default [
  set(state`query`, props`query`),
  debounce(500), {
    continue: makeQueryRequest,
    discard: []
  }
]

```

## Perform conditional execution

```javascript
import {when, equals} from 'cerebral/operators'
import {state, props} from 'cerebral/tags'

export default [
  when(state`app.isAwesome`), {
    true: [],
    false: []
  },
  equals(state`user.role`), {
    admin: [],
    user: [],
    otherwise: []
  }
]

```

In it's guts, an operator is actually an 'action factory', meaning, it's a function returning an action. So you can easily write your own operators to clearly express your intentions and make your code clean.

For a full list of built-in operators, see: [http://cerebraljs.com/docs/api/operators.html](http://cerebraljs.com/docs/api/operators.html)