Creating State

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.

Point to Demo! TBC

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)

You can see this in our Hello Wow! demo.

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:

Js

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

You can see how to create a Conan State with reducers in our Todos demo.

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

You can see how to create a Conan State with reducers and actions in our Github demo.

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