# Connecting

In this section we will explore the three ways available in ConanJs to connect a component with a state. There are four ways of doing it:

## Direct

We can use the Conan state object directly to connect to a component, using the method *connect*. This method will connect the whole state to the specified component 

{% tabs %}
{% tab title="Js" %}

```javascript
import { counterState$ } from "../../../state/counter.state$";

{counterState$.connect(CounterDisplay)}
```

{% endtab %}
{% endtabs %}

We can also use *connectMap* to connect to specific parts of the state:

{% tabs %}
{% tab title="Js" %}

```javascript
import { counterState$ } from "../../../state/counter.state$";

counterState$.connectMap(CounterContainer, (data, actions) => ({
    decrementCounter: actions.decrement,
    incrementCounter: actions.increment
}));

counterState$.connectMap(CounterDisplay, data => ({
    counter: data.counter
}))


```

{% endtab %}

{% tab title="Ts" %}

```typescript
import {counterState$} from "../../../state/counter.state$";

counterState$.connectMap<CounterContainerProps> (
    CounterContainer,
    (data, actions)=>({
        decrementCounter: actions.decrement,
        incrementCounter: actions.increment
    })
)

counterState$.connectMap<CounterDisplayProps> (
    CounterDisplay,
    data=>({
        counter: data.counter
    })
)
```

{% endtab %}
{% endtabs %}

## HOC

Using the ConanJs component StateConnect, we can connect a React component with a Conan state:

{% tabs %}
{% tab title="Js" %}

```javascript
export const CounterAppHOCAll = () => {
    return <StateConnect from={counterState$} into={CounterContainer}/>;
};
```

{% endtab %}

{% tab title="Ts" %}

```typescript
export const CounterAppHOCAll = (): React.ReactElement => {
    return <StateConnect<CounterData, CounterActions>
        from={counterState$}
        into={CounterContainer}
    />
}
```

{% endtab %}
{% endtabs %}

And then use the state's data and actions within our React component. We can also use Conan's component ContextStateConnect, to achieve the same purpose, connect the whole state with a component:

{% tabs %}
{% tab title="Js" %}

```javascript
<ContextStateConnect into={CounterDisplay}/>
```

{% endtab %}

{% tab title="Ts" %}

```typescript
<ContextStateConnect<CounterData, CounterActions>
    into={CounterDisplay}
/>
```

{% endtab %}
{% endtabs %}

{% hint style="success" %}
Inside the component, we can invoke the actions defined in the state, via props:&#x20;

```typescript
this.props.actions.decrement
```

{% endhint %}

{% hint style="success" %}
We can also access any data property via props:&#x20;

```typescript
<h1>{this.props.data.counter}</h1>
```

{% endhint %}

## Composition

We can also use compositions with the components *contextStateConnect* and *contextStateMapConnect*

*contextStateConnect* will connect the whole state:

{% tabs %}
{% tab title="Js" %}

```javascript
import {stateConnect, contextStateConnect} from "conan-js-core";

stateConnect(counterState$, CounterContainer);

contextStateConnect(CounterDisplay)
```

{% endtab %}

{% tab title="Ts" %}

```typescript
import {ConnectedState, stateConnect, contextStateConnect} from "conan-js-core";

stateConnect<CounterData, CounterActions>(
    counterState$,
    CounterContainer
)

contextStateConnect<CounterData, CounterActions>(CounterDisplay)
```

{% endtab %}
{% endtabs %}

*contextStateMapConnect* will connect only the specified properties:

{% tabs %}
{% tab title="Js" %}

```javascript
import {stateMapConnect, contextStateMapConnect} from "conan-js-core";

stateMapConnect(counterState$, CounterContainer, (data, actions) => ({
    decrementCounter: actions.decrement,
    incrementCounter: actions.increment
}));

contextStateMapConnect(CounterDisplay, (data) => ({
    counter: data.counter
}))
```

{% endtab %}

{% tab title="Ts" %}

```typescript
import {ICallback, contextStateMapConnect, stateMapConnect} from "conan-js-core";
�
stateMapConnect<CounterData, CounterContainerProps, CounterActions>(
    counterState$,
    CounterContainer,
    (data, actions)=>({
        decrementCounter: actions.decrement,
        incrementCounter: actions.increment
    })
)

contextStateMapConnect<CounterData, CounterDisplayProps, CounterActions>(
    CounterDisplay,
    (data)=>({
        counter: data.counter
    })
)
```

{% endtab %}
{% endtabs %}

## Hooks

ConanJs has the hooks *useConanState* and *useContextConanState* to connect to a state:

{% tabs %}
{% tab title="Js" %}

```javascript
import { counterState$ } from "../../../state/counter.state$";
import {useConanState, useContextConanState} from "conan-js-core";

const [, actions, ConanContext] = useConanState(counterState$);
const [data] = useContextConanState();

```

{% endtab %}

{% tab title="Ts" %}

```typescript
import {CounterActions, CounterData, counterState$} from "../../../state/counter.state$";
import {useConanState, useContextConanState} from "conan-js-core";

const [, actions, ConanContext] = useConanState <CounterData, CounterActions>(counterState$);
const [data] = useContextConanState <CounterData, CounterActions>();

```

{% endtab %}
{% endtabs %}

Please take a look at this code sandbox to see al the subscription approaches working:

{% embed url="<https://codesandbox.io/s/2zgr0>" %}