# Creating State

## Introduction

In ConanJs we advocate for splitting the state in its atomic representation and use as much as possible [the default actions](https://docs.conanjs.io/data/actions/types-of-actions#the-default-actions) and to [compose state](https://docs.conanjs.io/data/conan-state/pipes-composing-state) 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](https://docs.conanjs.io/api/main-classes/conan)

### 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!](https://docs.conanjs.io/tutorials/conan-state-demos/hello-wow) 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](https://docs.conanjs.io/api/main-classes/conan/statedef), but you will likely be interested in passing [Actions & Reducers](https://docs.conanjs.io/data/conan-state/actions) 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](https://docs.conanjs.io/tutorials/conan-state-demos/todos/todos-sync#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](https://docs.conanjs.io/tutorials/conan-state-demos/github-issues-viewer#creating-the-conan-states) demo.
{% endhint %}

## Guidelines

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

**2- If you need to create a full fledged ConanState, follow the** [guidelines for creating reducers and actions](https://docs.conanjs.io/data/actions#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>" %}