diff --git a/src/actions/index.ts b/src/actions/index.ts index 997dea4..2f35742 100644 --- a/src/actions/index.ts +++ b/src/actions/index.ts @@ -1,14 +1,19 @@ import { panDown, panLeft, panRight, panUp } from "@/components/workspace/zoom"; import { store } from "@/store"; -import { clearElements, deselectElement } from "@/store/reducers/editor"; +import { clearElements, deselectElement, selectElement } from "@/store/reducers/editor"; +import { stateToJSON } from "@/utils"; -export const actions = { +const actions = { + selectElement: (elementId: string) => store.dispatch(selectElement(elementId)), deselectElement: (elementId: string) => store.dispatch(deselectElement(elementId)), deselectAllElements: () => store.dispatch(clearElements(false)), + getState: stateToJSON, panLeft, panDown, panRight, panUp }; +export { store, actions }; + export default actions; diff --git a/src/stories/modifying-state.mdx b/src/stories/modifying-state.mdx new file mode 100644 index 0000000..f9bdc9a --- /dev/null +++ b/src/stories/modifying-state.mdx @@ -0,0 +1,31 @@ +import { Meta } from "@storybook/blocks"; + + + +

Modifying State

+ +

React Seat Toolkit uses Redux to manage its state. You can modify its state using the underlying `store` itself or a couple of abstracted `actions` which are available to you.

+ +

Here is an example of how you can deselect a seat manually and retrieve the updated state:

+ +```tsx +import { actions } from "@mezh-hq/react-seat-toolkit"; + +actions.deselectElement(""); + +const state = actions.getState(); + +console.log(state); // Updated workspace state of type STKData +``` + +

Here is an example of how you can import and use the `store` to retrieve the current Redux state:

+ +```tsx +import { store } from "@mezh-hq/react-seat-toolkit"; + +const state = store.getState(); + +console.log(state); // Current redux state (Not of type STKData) +``` + +

For a full list of supported actions please have a look at its type definitions