# Creating State

## Introduction

In ConanJs we advocate for splitting the state in its atomic representation and use as much as possible [the default actions](/data/conan-state/actions/types-of-actions.md#the-default-actions) and to [compose state](/data/conan-state/pipes-composing-state.md) if you need to combine/derive it.

{% hint style="info" %}
Point to Demo! TBC
{% endhint %}

To help with this, we provide with two main flavours to create state, Conan.light and Conan.state. You can see the details in the [API section for Conan](/api/main-classes/conan.md)

### Conan.light

Is the simplest way to create state.

Conan.light just receives two parameters:

1. state name: a string used to identify this state
2. the initial value

```typescript
const yetAnotherCounter$ = Conan.light('counter', 0)
```

{% hint style="info" %}
You can see this in our [Hello Wow!](/tutorials/conan-state-demos/hello-wow.md) demo.
{% endhint %}

### Conan.state

It is the full fledge option to create state, if you have to use this method to create state you will have to pass a StateDef object.

The object is described with detail in its API section [StateDef](/api/main-classes/conan/statedef.md), but you will likely be interested in passing [Actions & Reducers](/data/conan-state/actions.md) to it.

**Conan State only with reducers:**

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

```javascript
export const todoListSyncState$ = Conan.state({
    name: 'todos-sync',
    initialData: {
        appliedFilter: VisibilityFilters.SHOW_ALL,
        todos: []
    },
    reducers: getState=>({
        $addTodo: (todo) => ({
            todos: [...getState().todos, todo],
            appliedFilter: getState().appliedFilter
        })
    }),
});
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
You can see how to create a Conan State with reducers in our [Todos](/tutorials/conan-state-demos/todos/todos-sync.md#creating-the-todos-state) demo.
{% endhint %}

**Conan State with reducers and action:**

```typescript
export const repoDetailsState$: RepoDetailsState = Conan.state<RepoDetailsData>({
    name: 'repo-details',
    initialData: {openIssuesCount: -1, error: null},
    reducers: repoDetailsReducersFn,
    actions: repoDetailsActionsFn
});
```

{% hint style="info" %}
You can see how to create a Conan State with reducers and actions in our [Github](/tutorials/conan-state-demos/github-issues-viewer.md#creating-the-conan-states) demo.
{% endhint %}

## Guidelines

**1- If possible use Conan.light first.** We recommend to have atomic state, and to [compose state](/data/conan-state/pipes-composing-state.md) when needed

**2- If you need to create a full fledged ConanState, follow the** [guidelines for creating reducers and actions](/data/conan-state/actions.md#guidelines)**.** Similar to the previous point, we recommend to simplify the states that you create on your application.

## Demo

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


---

# 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/creating-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.