> For the complete documentation index, see [llms.txt](https://docs.conanjs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.conanjs.io/data/conan-state/creating-state.md).

# 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>" %}