Introduction

In ConanJs we advocate for splitting the state in its atomic representation and use as much as possible the default actions and to compose state if you need to combine/derive it.

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​

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

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

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, but you will likely be interested in passing Actions & Reducers to it.

Conan State only with reducers:

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
        })
    }),
});

Conan State with reducers and action:

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

Guidelines

1- If possible use Conan.light first. We recommend to have atomic state, and to compose state when needed

2- If you need to create a full fledged ConanState, follow the guidelines for creating reducers and actions. Similar to the previous point, we recommend to simplify the states that you create on your application.

Demo