reatom-solid v2.0.1

reatom-solid

Solid bindings package for Reatom store.

🚫 Deprecated❗️❗️❗️

Please use official adapter

Install

npm i reatom-solid

or

yarn add reatom-solid

reatom-solid depends on and works with @reatom/core and solid-js.

Hooks Api

useAtom

Connects the atom to the store represented in context and returns the state of the atom from the store (or default atom state).

Basic (useAtom)

const [atomValue] = useAtom(atom)

Depended value by selector

const atomValue = useAtom(atom, atomState => atomState[props.id])
const atomValue = createMemo(() => {
    const atom = createAtom({ dataAtom }, ({ get }) => get("dataAtom")[props.id]);
    const [value] = useAtom(atom);
    return value;
});

useAction

Binds action with dispatch to the store provided in the context.

Basic (useAction)

const handleUpdateData = useAction(dataAtom.update)

Prepare payload for dispatch

const handleUpdateData = useAction((value) => dataAtom.update({ id: props.id, value }))

Conditional dispatch

If action creator don't return an action dispatch not calling.

const handleUpdateData = useAction((payload) => {
  if (condition) return dataAtom.update(payload)
})

Usage

Step 0 - OPTIONAL. Create store

// App

import { createStore } from '@reatom/core'
import { reatomContext } from 'reatom-solid'
import { Form } from './components/Form'

import './App.css'

export const App = () => {
  // create statefull context for atoms execution
  const store = createStore()

  return (
    <div className="App">
      <reatomContext.Provider value={store}>
        <Form />
      </reatomContext.Provider>
    </div>
  )
}

Step 1. Bind your atoms.

// components/Form

import { createPrimitiveAtom } from '@reatom/core/primitives'
import { useAtom } from 'reatom-solid'

const nameAtom = createPrimitiveAtom('', {
  onChange: (e) => e.currentTarget.value,
})

export const Form = () => {
  const [name, { onChange }] = useAtom(nameAtom)

  return (
    <form>
      <label htmlFor="name">Enter your name</label>
      <input id="name" value={name} onChange={onChange} />
    </form>
  )
}

Demo

Codesandbox