Skip to content

Latest commit

 

History

History
78 lines (59 loc) · 1.67 KB

DOCS.md

File metadata and controls

78 lines (59 loc) · 1.67 KB

state0 documentation

Queue

To create the queue, use:

makeQueue<T>(
  state: IStateRecord<T>,
  reducers: IReducer<T>[],
  subscribers: ISubscriber<T>[] = []
)

Example:

import { queue } from "state0";

// instead of "IClickState", you can use your own type / interface.
// For example, maybe your dispatcher takes care of multiple states,
// you can use (IUserState | INotesState | ISettingsState) instead of "IClickState".
const queue = makeQueue<IClickState>(
  initialState,
  [clickReducer],
  [clickSubscriber]
);

Emit / Dispatch

Events can be dispatched using queueDispatch(queue: IQueue<T>, IAction<T>)

queueDispatch(queue, { type: ACTION_CLICK_INCREASE, payload: { amount: 1 } });

Subscribe

To subscribe on an event, use queueSubscribe(queue: IQueue<T>, ISubscriber<T>)

export const clickSubscriber = {
  type: CLICK_ACTION,
  id: "mySubscriberId",
  trigger: (data: IClickState) => {
    console.log(`Just received some data ${data}`);
  },
};

queueSubscribe(queue, clickSubscriber);

Reducing

Reducers are added when calling makeQueue (as mentioned at the top of this page).
You can pass a reducer to it like this:

export const clickReducer = {
  type: CLICK_ACTION,
  trigger: (prevState: IClickState, nextState: IClickState): IClickState => {
    return { amount: prevState.amount + nextState.amount };
  },
};

const queue = makeQueue<IClickState>(
  initialState,
  [clickReducer],
  [clickSubscriber]
);

Final Notes

Since its probably most likely you are going to use this with React,
Here is how to do that:
State0 with React