@duckness/store

Simple store for React components. Intended to store data that should not be stored in global store (i.e. redux) or do not need reducers/sagas.

Example

import createStore from '@duckness/store'
import React from 'react'

// Create a store with initial state and actions
const counterStore = createStore({
  initState: { count: 0 },
  actions: {
    increment: (amount = 1) => state => ({
      ...state,
      count: state.count + amount
    }),
    
    decrement: (amount = 1) => state => ({
      ...state,
      count: state.count - amount
    }),
    
    reset: () => state => ({
      ...state,
      count: 0
    })
  }
})

// Usage with hooks in components
function CounterComponent() {
  // Select just what you need from the store
  const count = counterStore.useStore({
    selector: state => state.count
  })
  
  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={() => counterStore.actions.increment()}>+1</button>
      <button onClick={() => counterStore.actions.increment(5)}>+5</button>
      <button onClick={() => counterStore.actions.decrement()}>-1</button>
      <button onClick={() => counterStore.actions.reset()}>Reset</button>
    </div>
  )
}

// Or use Consumer component
function CounterWithConsumer() {
  return (
    <counterStore.Consumer selector={state => state.count}>
      {count => (
        <div>
          <h2>Counter: {count}</h2>
          <button onClick={() => counterStore.actions.increment()}>+1</button>
          <button onClick={() => counterStore.actions.decrement()}>-1</button>
        </div>
      )}
    </counterStore.Consumer>
  )
}

// Direct store manipulation
function incrementAsync() {
  setTimeout(() => {
    counterStore.updateStore(state => ({
      ...state,
      count: state.count + 1
    }))
  }, 1000)
}

Table of Contents

• Example
• API
  • Creating a store
  • Store interface
  • useStore hook
  • Consumer component
  • Selectors
  • Exported Helper functions
• @Duckness packages:

API

Creating a store

Creates a new store with optional initial state and actions:

const store = createStore({
  initState: {}, // optional initial state, defaults to {}
  actions: {}    // optional action creators, defaults to {}
})

Store interface

The store object provides the following methods:

• useStore(options): React hook to use store state in components
• Consumer: React component for consuming store state
• actions: Object containing bound action creators
• updateStore(updater): Update store state using an updater function
• getState(selector): Get current state or part of it using a selector
• subscribe(listener): Subscribe to store changes
• destroy(): Clear all listeners from the store

useStore hook

const value = store.useStore({
  updateOnMount: (state) => state,              // Optional updater to run when component mounts
  updateOnUnmount: (state) => state,            // Optional updater to run when component unmounts
  selector: (state) => value,                   // Function to select part of the store state
  shouldSelect: function(prevState, nextState), // Control when selector runs based on store state changes
  shouldUpdate: function(prevValue, nextValue), // Control when component updates based on selected value changes (default: whenChanged)
  debounce: milliseconds,                       // Debounce updates by specified milliseconds (default: no debounce)
  async: boolean                                // Process updates asynchronously (default: false)
})

Example:

const username = userStore.useStore({
  selector: state => state.user.name,
  debounce: 300 // only update component 300ms after last state change
})

Consumer component

Same props as in useStore

<store.Consumer
  selector={state => state.user}
  debounce={300}
  async={false}
>
  {user => (
    <div>Hello, {user.name}!</div>
  )}
</store.Consumer>

Selectors

Selectors extract parts of the store state:

// Get the full state
const state = store.getState()

// Use selector function
const username = store.getState(state => state.user?.name)

Exported Helper functions

• selectAll(value): Returns the entire value (identity function)
• always(): Always returns true
• whenChanged(a, b): Returns true if a !== b

@Duckness packages:

• @duckness/duck - Modular Redux Ducks hatchery
• @duckness/saga - Redux Saga extension for @duckness/duck
• @duckness/epic - Redux-Observable extension for @duckness/duck
• @duckness/pool - @duckness/duck + Redux
• @duckness/pool-saga-stream - @duckness/saga plugin for @duckness/pool
• @duckness/pool-epic-stream - @duckness/epic plugin for @duckness/pool
• @duckness/react-redux-pool - @duckness/pool + React-Redux
• @duckness/use-redux - React hook for Redux store
• @duckness/use-pool - React hook for @duckness/pool.
• @duckness/store - simple store for React components
• @duckness/reactor - reactive data flow builder