# Use with React / Preact

## Use with React / Preact

There are 3 ways to use **Reim** with **React**, and you can choose depending on scenerios.

### 0. 'Hook' way (React 16.8+)

```jsx
import React from 'react'
import reim from 'reim'
import {useReim} from 'react-reim'

const store = reim({count: 8})

function Counter() {
  const [state, setState] = useReim(store, /* getter */)
  const increment = () => setState(s => {s.count++})

  return (
    <div>
      <button onClick={increment}>+</button>
      <div id="count">{state.count}</div>
    </div>
  )
}
```

### 1. Minimal way

`react-reim` 's `react` plugin adds `get` function so that you can use derive component from store state

```jsx
import React from 'react'
import reim from 'reim'
import react from 'react-reim'

// create a store
const {get, set} = reim({name: 'Peter'}).plugin(react())

// get state already :)
const User = () => (
  <div>{get(s => s.name)}</div>
)

// oh and setting state :D
const App = () => (
  <div>
    <User/>
    {get(s => (
      <input
        value={s.name}
        onChange={ev => set({name: ev.target.value})}
      />
    ))}
  </div>
)
```

### 2. Unstated way

`react-reim` 's `react` plugin also adds `Consumer` component so that you can use store right in components

{% code title="stores/counter.js" %}

```javascript
import reim from 'reim'
import react from 'react-reim'

const counterStore = reim({
    count: 0
}, {
  plugins: [react()]
})

export const mutations = {
    decrement(state) {
        state.count--
    },
    increment(state) {
        state.count++
    },
    add: amount => state => {
        state.count += amount
    }
}


export default counterStore
```

{% endcode %}

Now to use it:

{% code title="index.js" %}

```jsx
import React from 'react'
import {render} from 'react-dom'

import counterStore, {mutations} from 'stores/counter'

const App = () => {
    return (
        <counterStore.Consumer>
        {
            ({count}, {setState: setTodoState}) => (
                <div>
                    <h1>{count}</h1>
                    <button
                        onClick={() => setTodoState(mutations.decrement)}
                    >-</button>
                    <button
                        onClick={() => setTodoState(mutations.increment)}
                    >+</button>
                </div>
            )
        }
        </counterStore.Consumer>
    )
}

render(<App/>, document.getElementById('app'))
```

{% endcode %}

### 3. Redux way

The **Unstated** way is convenient, but sometimes we want to make sure to separate **Container Component** and **Presentation Component**.

This is why Reim also provides the `connect` function

{% code title="containers/counter.js" %}

```javascript
import {connect} from 'react-reim'

import counterStore, {mutations} from '../stores/counter'
import Counter from '../components/counter'

export default connect(
    counterStore,

    // Getter: extracts state from store
    ({count}) => ({total: count}),

    // Setter: extracts methods to mutate state
    ({setState}) => ({
        addTwo: () =>
            setState(mutations.add(2))
    })
)(Counter)
```

{% endcode %}

{% code title="components/counter.js" %}

```jsx
import React from 'react'

export default ({addTwo, count}) => (
    <div>
        <h2>{count}</h2>
        <button onClick={addTwo}>+2</button>
    </div>
)
```

{% endcode %}

## Sync with react-router

Just need to use pipeTo...

```jsx
import {BrowserRouter, Route} from 'react-router-dom'
import reim from 'reim'

const store = reim({})

const App = () => (
  <BrowserRouter>
    <Route component={pipeTo(store)}/>
  </BrowserRouter>
)
```


---

# 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://reimjs.gitbook.io/reim/guide/use-with-react.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.