> For the complete documentation index, see [llms.txt](https://react-epic.gitbook.io/deviation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://react-epic.gitbook.io/deviation/core-concepts.md).

# 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')
)
```