rofrischmann/alveron

View on GitHub
website/docs/api/useStore.mdx

Summary

Maintainability
Test Coverage
# useStore

useStore is Alveron's main API.
It uses React's [useState](https://beta.reactjs.org/reference/react/useState) under the hood.

If an updated `model` is passed in, the store will reset to the new model.

## Arguments

| Argument | Type      | Description                                                                                                              |
| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------ |
| actions  | _Object?_ | A map of [actions](concepts/action) where the key represents the action name and the value represents the action reducer |
| model    | _any?_    | Our store model reflecting the initial state shape                                                                       |

## Returns

_(Array)_ an array containing the state and actions to be used inside a React component.

## Example

```jsx
import * as React from 'react'
import { useStore } from 'alveron'

const model = 0
const actions = {
  increment: (prevState) => [prevState + 1],
  decrement: (prevState) => [prevState - 1],
}

function Counter() {
  const [state, { increment, decrement }] = useStore(actions, model)

  return (
    <div>
      Count: {state}
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  )
}
```