Store - Documentation

new Store(initialState, actionsopt, devtoolopt)

Source:

store.js, line 20

Create a new store instance.

Parameters:

Name	Type	Attributes	Description
`initialState`	object		Any plain JS object (Arrays not allowed at the top level).
`actions`	function	<optional>	A function, which takes a reference to `store`, and returns an object of actions for invoking changes to state.
`devtool`	function	<optional>	Provide a reference to `window.__REDUX_DEVTOOLS_EXTENSION__` to enable redux devtools.

Methods

dispatch(branch)

Source:

store.js, line 287

Please use action creators instead of calling dispatch directly.

Example

import { Store } from "simple-shared-state";

// Create a store with state:
const store = new Store({
  email: "[email protected]",
  counters: {
    likes: 1,
  },
  todoList: [
    { label: "buy oat milk" },
    { label: "buy cat food" },
  ],
});

// To change email, call dispatch with a branch. The branch you provide must include the full path
// from the root of the state, to the value you want to change.
store.dispatch({
  email: "[email protected]",
});

// To increment likes:
store.dispatch((state) => ({
  counters: {
    likes: state.counters.likes + 1,
  },
}));

// To delete any piece of state, use a reference to `store.deleted` as the value in the branch.
// To remove `counters` from the state entirely:
store.dispatch({
  counters: store.deleted,
});

// To update items in arrays, you can use `partialArray`:
store.dispatch({
  todoList: partialArray(1, {
    label: "buy oat milk (because it requires 80 times less water than almond milk)",
  }),
});

Parameters:

Name	Type	Description
`branch`	object \| function	A JavaScript object, or a function which takes state and returns a JavaScript object. The object may contain any Array or JS primitive, but must be a plain JS object at the top level, otherwise dispatch will throw.

dispatchTyped(actionName, branch)

Source:

store.js, line 260

Please use action creators instead of calling dispatchTyped directly.

Parameters:

Name	Type	Description
`actionName`	string	This is only for the benefit of providing a label in redux devtools.
`branch`	object \| function	A JavaScript object, or a function which takes state and returns a JavaScript object. The object may contain any Array or JS primitive, but must be a plain JS object at the top level, otherwise dispatch will throw.

getState(selectoropt) → {*}

Source:

store.js, line 239

Parameters:

Name	Type	Attributes	Description
`selector`	function	<optional>	Optional but recommended function which returns a piece of the state. Error handling not required, your selector will run inside a `try{} catch{}` block.

Returns:

A shallow copy of the state tree, or a copy of the piece returned from the selector, or undefined if the selector fails.

Type: *

watch(selector, handler, runNowopt) → {function}

Source:

store.js, line 105

Creates a state listener which is associated with the selector. Every selector must be globally unique, as they're stored internally in a Set. If watch receives a selector which has already been passed before, watch will throw. Refer to the tests for more examples. watch returns a function which, when called, removes the watcher / listener.

Parameters:

Name	Type	Attributes	Default	Description
`selector`	function			A pure function which takes state and returns a piece of that state.
`handler`	function			The listener which will receive the piece of state when changes occur.
`runNow`	boolean	<optional>	`true`	Pass false to prevent `handler` from being called immediately after watch is called.

Returns:

Invoke this function to destroy the listener.

Type: function

watchBatch(selectors, handler) → {function}

Source:

store.js, line 141

Creates a dispatch listener from a list of selectors. Each selector yields a snapshot, which is stored in an array and updated whenever the state changes. When dispatch happens, your handler function will be called with the array of snapshots, if any snapshots have changed.

Example

import { Store, partialArray } from "simple-shared-state";

const store = new Store({
  people: ["Alice", "Bob"],
});

const unwatch = store.watchBatch([
  (state) => state.people[0],
  (state) => state.people[1],
], (values) => console.log(values));

store.dispatch({ people: partialArray(1, "John") });
// [ 'Alice', 'John' ]

store.dispatch({ people: [ "Janet", "Jake", "James" ] });
// [ 'Janet', 'Jake' ]
// notice "James" is not present, that's because of our selectors

console.log(store.getState(s => s.people));
// [ 'Janet', 'Jake', 'James' ]

unwatch();
store.dispatch({ people: [ "Justin", "Josh", store.deleted ] });
// nothing happens, the watcher was removed

console.log(store.getState(s => s.people));
// [ 'Justin', 'Josh', <1 empty item> ]

Parameters:

Name	Type	Description
`selectors`	Array.<function()> \| Set.<function()>	A Set or Array of selector functions. Refer to Store#watch for details about selector functions.
`handler`	function	The listener which will receive the Array of state snapshots.

Returns:

A callback that removes the dispatch watcher and cleans up after itself.

Type: function

watchDispatch(handler)

Source:

store.js, line 225

Listen for the after-dispatch event, which gets called with no arguments after every dispatch completes. Dispatch is complete after all watchers have been called.

Parameters:

Name	Type	Description
`handler`	function	A callback function.