Using SyncState without React

Using SyncState without React is possible and not very different from its usage with React. The main reason behind this is store.useDoc function with very similar API as useDoc hook for React.

But there is a difference. Your React component subscribes to changes at the path passed to useDoc hook, while store.useDoc only returns the state and setter function without the subscription. You can subscribe to state changes using observe(path, listener, depth)

Let's see an example

// Create store

const initialDoc = { todos: [] };

const store = createDocStore(initialDoc);

// Define actions

function addTodo(setTodos, todoItem) {

setTodos((todos) => {

todos.push(todoItem);

});

}

// Fetching and updating state

const [todos, setTodos] = store.useDoc("/todos");

addTodo(setTodos, { caption: "hello", done: false });

// Subscribe to state changes

const dispose = store.observe(

"/todos",

(todos, change) => {

console.log("todos has been updated");

console.log("Updated todos: ", todos);

},

1

);