updux/docs-docsidy/tutorial.md

--8<- "docs/tutorial-effects.test.ts:effects-1"

Subduxes

Now that we have all the building blocks, we can embark on the last and funkiest part of Updux: its recursive nature.

Recap: the Todos dux, undivided

Upduxes can be divided into sub-upduxes that deal with the various parts of the global state. This is better understood by working out an example, so let's recap on the Todos dux we have so far:

--8<- "docs/tutorial-monolith.test.ts:mono"

This store has two main components: the nextId, and the todos collection. The todos collection is itself composed of the individual todos. Let's create upduxes for each of those.

NextId dux

--8<- "docs/nextId.ts:dux"

Todo updux

--8<- "docs/todo.ts"

Todos updux

--8<- "docs/todos.ts"

Main store

--8<- "docs/todoList.ts"

Tadah! We had to define the addTodo effect at the top level as it needs to access the getNextId selector from nextId and the addTodoWithId action from the todos.

Note that the getNextId selector still gets the right value; when aggregating subduxes selectors Updux auto-wraps them to access the right slice of the top object.

Reactions

Reactions -- aka Redux's subscriptions -- can be added to a updux store via the initial config or the method addSubscription. The signature of a reaction is:

(storeApi) => (state, previousState, unsubscribe) => {
    ...
}

Subscriptions registered for an updux and its subduxes are automatically subscribed to the store when calling createStore.

The state passed to the subscriptions of the subduxes is the local state.

Also, all subscriptions are wrapped such that they are called only if the local state changed since their last invocation.

Example:

const todos = new Updux({
    initial: [],
    actions: {
        setNbrTodos: null,
        addTodo: null,
    },
    mutations: {
        addTodo: todo => todos => [ ...todos, todo ],
    },
    reactions: [
        ({dispatch}) => todos => dispatch.setNbrTodos(todos.length)
    ],
});

const myDux = new Updux({
    initial: {
        nbrTodos: 0
    },
    subduxes: {
        todos,
    },
    mutations: {
        setNbrTodos: nbrTodos => u({ nbrTodos  })
    }
});