@twocatmoon/react-actions

Type aliases

Action

Action<State, Input>: { id: string; resolve: any }

Type parameters

State
Input

Type declaration

- (...args: Input extends undefined ? [data?: undefined] : [data: Input]): ActionPayload<Input>
- Called internally by the Store to resolve action state
  
  Parameters
  - Rest ...args: Input extends undefined ? [data?: undefined] : [data: Input]
  Returns ActionPayload<Input>
id: string

Unique ID for each action. Automatically assigned based on key names from the ActionMap passed into createStore
resolve:function
- resolve(state: State, data: Input): State
- - Defined in index.tsx:43
  User-defined resolver function for the action
  
  Parameters
  - state: State
  - data: Input
  Returns State

ActionMap

ActionMap: {}

Type declaration

[key: string]: Action<any, any>

A collection of Actions with human-readable keys

ActionPayload

ActionPayload<Input>: [actionId: string, data: Input]

Type parameters

Input = any

ActionSet

ActionSet<State, Input, Result>: (data?: Input) => [ActionSetExecute<State, Input, Result>, Input]

Type parameters

State = any
Input = any
Result = void

Type declaration

- (data?: Input): [ActionSetExecute<State, Input, Result>, Input]
- Parameters
  - Optional data: Input
  Returns [ActionSetExecute<State, Input, Result>, Input]

ActionSetExecute

ActionSetExecute<State, Input, Result>: (dispatch: Dispatch, state: State, data: Input) => Promise<Result>

Type parameters

State
Input
Result

Type declaration

- (dispatch: Dispatch, state: State, data: Input): Promise<Result>
- Parameters
  - dispatch: Dispatch
  - state: State
  - data: Input
  Returns Promise<Result>

ActionSetMap

ActionSetMap: {}

Type declaration

[key: string]: ActionSet<any, any, any>

A collection of ActionsSets with human-readable keys

CreateStoreContextResult

CreateStoreContextResult<State>: { Provider: any; useStore: any }

Type parameters

State

Type declaration

Provider:function
- Provider(props: { children: React.ReactNode }): Element
- - Defined in context.tsx:5
  Parameters
  - props: { children: React.ReactNode }
    - children: React.ReactNode
  Returns Element
useStore:function
- useStore(): [state: State, dispatch: Dispatch<any>, execute: Execute, clearStorage: () => void]
- - Defined in context.tsx:6
  Returns [state: State, dispatch: Dispatch<any>, execute: Execute, clearStorage: () => void]

CreateStoreEventBusResult

CreateStoreEventBusResult<State>: { useStore: any }

Type parameters

State

Type declaration

useStore:function
- useStore(): [state: State, dispatch: Dispatch<any>, execute: Execute, clearStorage: () => void]
- - Defined in eventBus.tsx:43
  Returns [state: State, dispatch: Dispatch<any>, execute: Execute, clearStorage: () => void]

CreateStoreOptions

CreateStoreOptions: { ssr?: boolean; storageKey?: string; storageType?: "local" | "session" }

Type declaration

Optional ssr?: boolean

Enable support for server-side rendering
Optional storageKey?: string

Key to use when storing state in local/session storage
Optional storageType?: "local" | "session"

Storage API to use, if any

Dispatch

Dispatch<Payload>: (payload: ActionPayload<Payload>) => void

Type parameters

Payload = any

Type declaration

- (payload: ActionPayload<Payload>): void
- Parameters
  - payload: ActionPayload<Payload>
  Returns void

Execute

Execute: (actionSetPayload: [ActionSetExecute<any, any, any>, any]) => void

Type declaration

- (actionSetPayload: [ActionSetExecute<any, any, any>, any]): void
- Parameters
  - actionSetPayload: [ActionSetExecute<any, any, any>, any]
  Returns void

ListenerMap

ListenerMap: { [ Property in keyof StoreEvents]: ((...args: any[]) => void)[] }

Reducer

Reducer<State>: (prevState: State, actionPayload: ActionPayload) => State

Type parameters

State

Type declaration

- (prevState: State, actionPayload: ActionPayload): State
- Parameters
  - prevState: State
  - actionPayload: ActionPayload
  Returns State

StoreContext

StoreContext<State>: { dispatch: Dispatch; execute: Execute; state: State }

The shape of the React context object that contains the Store's state and dispatch function.

Type parameters

State

Type declaration

dispatch: Dispatch
execute: Execute
state: State

StoreEvents

StoreEvents: { state_changed: any }

Type declaration

state_changed:function
- state_changed(event: { newState: any }): void
- - Defined in eventBus.tsx:9
  Parameters
  - event: { newState: any }
    - newState: any
  Returns void

Functions

action

action<State, Input>(resolver: (state: State, data: Input) => State): Action<State, Input>

- Defined in index.tsx:90
Generates an Action object, which when passed into createStore as part of an ActionMap, can be called to mutate the Store's state.
example
```
// store.ts

const actions = {    
    incrementCounter: action<State, number>((prevState, amount) => {
        return {
            ...prevState,
            counter: prevState.counter + amount
        }
    })
}

...

// Component.tsx

function Component () {
    const [ state, dispatch ] = useStore()
    dispatch(actions.incrementCounter(2))
     
    ...
}
```
Type parameters
- State
- Input
Parameters
- resolver: (state: State, data: Input) => State
  
  The resolver function to be called by the Store's reducer. This function takes in user-input, and should return the modified state. This function can be thought of as a single case in a switch statement as you'd see in Redux or useReducer
  - - (state: State, data: Input): State
    - User-defined resolver function for the action
      
      Parameters
      - state: State
      - data: Input
      Returns State
Returns Action<State, Input>
- The modified full state of the Store

actionSet

actionSet<State, Input, Result>(execute: ActionSetExecute<State, Input, Result>): ActionSet<State, Input, Result>

Generates an ActionSet object, which can be used to execute asynchronous functions and dispatch Actions to the store.

example

// store.ts

const actionSets = {    
    fetchCounterData: actionSet<State, number>(async (dispatch, state, input) => {
        const nextValue = await fetch(`/api/counter/${input}`)
        dispatch(actions.incrementCounter(nextValue))
    })
}

...

// Component.tsx

function Component () {
    const [ state, dispatch, execute ] = useStore()
    execute(actionSets.fetchCounterData(2))
     
    ...
}

Type parameters

State
Input = any
Result = void

Parameters

execute: ActionSetExecute<State, Input, Result>

Async function to execute

Returns ActionSet<State, Input, Result>

Optionally returns the Result

clearStorage

clearStorage(storageApi: undefined | Storage, storageKey: undefined | string): void

- Defined in index.tsx:188
Used internally to clear the cached state

Parameters
- storageApi: undefined | Storage
- storageKey: undefined | string
Returns void

createStoreContext

createStoreContext<State>(initialState: State, actions: ActionMap, options?: CreateStoreOptions): CreateStoreContextResult<State>

example

type State = {
    counter: number
}

const initialState = {
    counter: 0
}

const actions = {
    ...
}

const options: CreateStoreOptions = {
    storageKey: 'myStore',
    storageType: 'local'
}

export const { Provider, useStore } = createStoreContext<State>(initialState, actions, options)

Type parameters

State

Parameters

initialState: State

The initial state of the Store
actions: ActionMap

The map of Actions to bind to the returned Store
Optional options: CreateStoreOptions

Returns CreateStoreContextResult<State>

createStoreEventBus

createStoreEventBus<State>(initialState: State, actions: ActionMap, options?: CreateStoreOptions): CreateStoreEventBusResult<State>

example

type State = {
    counter: number
}

const initialState = {
    counter: 0
}

const actions = {
    ...
}

const options: CreateStoreOptions = {
    storageKey: 'myStore',
    storageType: 'local'
}

export const { useStore } = createStoreEventBus<State>(initialState, actions, options)

Type parameters

State

Parameters

initialState: State

The initial state of the Store
actions: ActionMap

The map of Actions to bind to the returned Store
Optional options: CreateStoreOptions

Returns CreateStoreEventBusResult<State>

getStorage

getStorage<State>(storageKey: undefined | string, storageType: undefined | "local" | "session"): [Storage | undefined, State | undefined]

- Defined in index.tsx:163
Used internally to retrieve the storage API and initial state

Type parameters
- State
Parameters
- storageKey: undefined | string
- storageType: undefined | "local" | "session"
Returns [Storage | undefined, State | undefined]

makeReducer

makeReducer<State>(actions: ActionMap, storageApi: undefined | Storage, storageKey: undefined | string): (state: State, payload: ActionPayload<any>) => any

- Defined in index.tsx:137
Used internally to generate the reducer for the different Stores

Type parameters
- State
Parameters
- actions: ActionMap
- storageApi: undefined | Storage
- storageKey: undefined | string
Returns (state: State, payload: ActionPayload<any>) => any
- - (state: State, payload: ActionPayload<any>): any
  - Parameters
    - state: State
    - payload: ActionPayload<any>
    Returns any

Index

Classes

Type aliases

Functions

Type aliases

Action

Type parameters

State

Input

Type declaration

Parameters

Rest ...args: Input extends undefined ? [data?: undefined] : [data: Input]

Returns ActionPayload<Input>

id: string

resolve:function

Parameters

state: State

data: Input

Returns State

ActionMap

Type declaration

[key: string]: Action<any, any>

ActionPayload

Type parameters

Input = any

ActionSet

Type parameters

State = any

Input = any

Result = void

Type declaration

Parameters

Optional data: Input

Returns [ActionSetExecute<State, Input, Result>, Input]

ActionSetExecute

Type parameters

State

Input

Result

Type declaration

Parameters

dispatch: Dispatch

state: State

data: Input

Returns Promise<Result>

ActionSetMap

Type declaration

[key: string]: ActionSet<any, any, any>

CreateStoreContextResult

Type parameters

State

Type declaration

Provider:function

Parameters

props: { children: React.ReactNode }

children: React.ReactNode

Returns Element

useStore:function

Returns [state: State, dispatch: Dispatch<any>, execute: Execute, clearStorage: () => void]

CreateStoreEventBusResult

Type parameters

State

Type declaration

useStore:function

Returns [state: State, dispatch: Dispatch<any>, execute: Execute, clearStorage: () => void]

CreateStoreOptions

Type declaration

Optional ssr?: boolean

Optional storageKey?: string

Optional storageType?: "local" | "session"

Dispatch

Type parameters

Payload = any

Type declaration

Parameters

payload: ActionPayload<Payload>

Returns void

Execute

Type declaration

Parameters