# Composing State

## Introduction

We advocate for creating atomic state and to compose new state when you need to. 

There are several composition operations that you can perform and that we will see below.

One key aspect of composing state is that it returns another ConanState, which you can compose again.

![Inception!](/files/-MBiEF6H4M2z1c9Hfa_v)

## One state to one state

### Map

We can derive one state into a new one using *ConanState*.*map*:

{% tabs %}
{% tab title="Js" %}

```javascript
productQty$.map((productQty)=>productQty.qty)

productPrice$.map((price)=>price.priceUsd)
```

{% endtab %}
{% endtabs %}

### Filter

We can filter 1 state into a new one using *ConanState.filter:*

```javascript
productQty$.filter((productQty) => productQty.qty % 2 === 0)
    
productQty$.filter((productQty)=>productQty.qty % 2 !== 0)
```

## Two states to one state

### Merge

We can merge 2 states into 1 using *ConanState.merge:*

{% tabs %}
{% tab title="Js" %}

```javascript
productQty$.merge(productPrice$, (productQty, productPrice)
 => productQty && productPrice ? productQty.qty * productPrice.priceUsd : 0)
```

{% endtab %}
{% endtabs %}

### Tuple

{% tabs %}
{% tab title="Js" %}

```javascript
productQty$.tuple(productPrice$)
```

{% endtab %}
{% endtabs %}

## **Many** states to one state

### **Combine**

We can combine N states into a new one using *ConanState.combine*:

{% tabs %}
{% tab title="Js" %}

```javascript
ConanState.combine(`combine`, {
    price: productPrice$,
    qty: productQty$
})
```

{% endtab %}

{% tab title="Ts" %}

```typescript
ConanState.combine<CombinedObject>(
    `combine`,
    {
        price: productPrice$,
        qty: productQty$
    }
)
```

{% endtab %}
{% endtabs %}

�

## Examples

You can navigate these examples in this sandbox:

{% embed url="<https://codesandbox.io/s/0po76?file=/src/app.tsx>" %}
Composing Conan states
{% endembed %}

## Composing State + Dependency Injection

Our dependency injection lets you describe atomic and composed state such that from the point of view of their consumers, they would not know (and won't care) wether if it is atomic state or not.

Check out our [dependency Injection](/dependency-injection.md) for more details

## Demo

{% embed url="<https://codesandbox.io/s/3zs2m>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.conanjs.io/data/conan-state/pipes-composing-state.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.