react-flat-store
TypeScript icon, indicating that this package has built-in type declarations

0.3.1 • Public • Published

React Flat Store

React Flat Store is a strongly-typed state management utility ideally suited for "flat" data. There is a simple useStore API for component state management, and a createContextStore API for multi-component state management using React Contexts.

npm install react-flat-store
// Simple use case
import { useStore } from 'react-flat-store'

function SimpleCounter() {
  const {
    state: { counter },
    update,
  } = useStore({ counter: 0 })

  const inc = () => update('counter', counter + 1)
  const dec = () => update('counter', counter - 1)

  return (
    <div>
      <button onClick={inc}>Increment</button>
      <button onClick={dec}>Decrement</button>
      <span>{counter}</span>
    </div>
  )
}
// Context-based use case
import { createContextStore } from 'react-flat-store'

const { Store, useStore, useKey } = createContextStore({ counter: 0 })
const useCounter = () => useKey('counter')

function ContextCounter() {
  return (
    <Store>
      <div>
        <Increment />
        <Decrement />
        <Counter />
      </div>
      <Submit />
    </Store>
  )
}

function Increment() {
  const { value, update } = useCounter()
  return <button onClick={() => update(value + 1)}>Increment</button>
}

function Decrement() {
  const { value, update } = useCounter()
  return <button onClick={() => update(value - 1)}>Decrement</button>
}

function Counter() {
  const { value } = useCounter()
  return <span>{value}</span>
}

function Submit() {
  const { state } = useStore()
  const submit = () => console.log(state)
  return <button onClick={submit}>Submit</button>
}

Tutorials

How To

Reference

useStore

  • Input: initial state
  • Output: An object containing state, set, and update
function Component() {
  const { state, set, update } = useStore({ a: 1, b: '2' })
}

state is the current state.

set is a function that overwrites the entire state: set(newState)

update is a function that updates a particular key: update(key, newValue)

createContextStore

  • Input: initial state
  • Output: An object containing Store, useStore, and useKey
const { Store, useStore, useKey } = createContextStore({
  a: 1,
  b: '2',
  c: { three: 3 },
})

Store

Store is a React component that provides state context. There are no required props and one optional prop, state. It is recommended to supply the state when you call createContextStore, but you might not know the initial values until a runtime fetch, in which case you can provide the state inline.

function Parent({ children }) {
  return <Store>{children}</Store>
}
function Parent({ children }) {
  const [payload, setPayload] = useState({ a: 0, b: '', c: { three: 0 } })

  useEffect(() => {
    const getData = async () => {
      const newPayload = await Promise.resolve({
        a: 1,
        b: '2',
        c: { three: 3 },
      })
      setPayload(newPayload)
    }

    getData()
  }, [])

  return <Store state={payload}>{children}</Store>
}

useStore

useStore is a React hook that behaves identically to the context-less useStore API listed above. It returns state, set, and update. There are no inputs.

useKey

  • Input: key: string. The key name.
  • Outputs:
    • key: string: The key name.
    • value: State[Key]: The key's value. Strongly typed.
    • update: (key: string, newValue: State[Key]) => void: An update function which updates the key's value to a new value. Strongly typed. No output.
const { Store, useStore, useKey } = createContextStore({ a: 1 })

function Child() {
  const { key, value, update } = useKey('a')

  console.log(key, value) // initially => 'a', 1

  update(2) // eventually => 'a', 2
}

Package Sidebar

Install

npm i react-flat-store

Weekly Downloads

0

Version

0.3.1

License

MIT

Unpacked Size

23.6 kB

Total Files

15

Last publish

Collaborators

  • aegatlin