# Core Concepts

At its core, Deviation is a Dependency Injection system. Its API consists of the following three components:

> * Store
> * Inject
> * Deviation

Every other features of Deviation is built around these three features.

## Store

Store is a state container. It contains state, global variables and methods for manipulate these variables. It also has it own `setState` and life-cycle hooks, which is managed by Deviation.

```typescript
import { Store } from 'deviation'

export class CounterStore extends Store {
    state = {
        counter: 0
    }
    
    increment = () => this.setState(({ counter }) => ({ counter: counter + 1 }))
    
    decrement = () => this.setState(({ counter }) => ({ counter: counter - 1 }))
}
```

## Deviation

Deviation is a React component where we provide these stores to the components. It's a React component, put this component at the root of your project will provide the whole project with the stores we declared.

```typescript
ReactDOM.render(
    <Deviation providers={[
        RouterService,
        LoginService,
        SignupService
    ]}>
        <AppRoot />
    </Deviation>,
    document.getElementById('root')
)
```

It initializes the stores, manage the stores life-cycle and injections order between stores and some further stuffs.

## Inject

Last but not least, we need to inject these stores into the components that we use. Using Inject is the way we do that:

```typescript
import { Inject } from 'deviation'

@Inject({
    routerService: RouterService,
    loginService: LoginService
})
export class LoginPage extends React.Component { }
```

We can also inject a store into a store. It is good to have a store that stands on top of another store and controls that store. It is how store architecture should be:

```typescript
import { Inject } from 'deviation'

export class CounterStore extends Store {
    state = {
        counter: 0
    }

    increment() {
        this.setState(({ counter }) => ({ counter: counter + 1 }))
    }
}

@Inject({
    counterStore: CounterStore
})
export class TodoStore extends Store {
    state = {
        todos: []
    }
    
    addTodo(todo) {
        this.setState(({ todos }) => ({ todos: todos.concat([todo]) }))
        
        this.props.counterStore.increment()
    }
}

ReactDOM.render(
    <Deviation providers={[CounterStore, TodoStore]}>
        <AppRoot />
    </Deviation>,
    document.getElementById('root')
)
```


---

# 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://react-epic.gitbook.io/deviation/core-concepts.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.