fixup! change snippet markup for tutorial

This commit is contained in:
Yanick Champoux 2024-02-26 14:28:08 -05:00
parent 2e4b0900ea
commit b4c1b357e4

View File

@ -16,20 +16,25 @@ plain JavaScript.
To begin with, let's define that has nothing but an initial state. To begin with, let's define that has nothing but an initial state.
[filename](tutorial-1.test.ts ':include :type=code :fragment=tut1') ```
--8<- "docs/tutorial-1.test.ts:tut1"
```
Congrats! You have written your first Updux object. It Congrats! You have written your first Updux object. It
doesn't do a lot, but you can already create a store out of it, and its doesn't do a lot, but you can already create a store out of it, and its
initial state will be automatically set: initial state will be automatically set:
[filename](tutorial-1.test.ts ':include :type=code :fragment=tut2') ```
--8<- "docs/tutorial-1.test.ts:tut2"
```
## Add actions ## Add actions
This is all good, but very static. Let's add some actions! This is all good, but very static. Let's add some actions!
```
[filename](tutorial-actions.test.ts ':include :type=code :fragment=actions1') --8<- "docs/tutorial-actions.test.ts:actions1"
```
### Accessing actions ### Accessing actions
@ -37,14 +42,18 @@ Once an action is defined, its creator is accessible via the `actions` accessor.
This is not yet terribly exciting, but it'll get more interesting once we begin using This is not yet terribly exciting, but it'll get more interesting once we begin using
subduxes. subduxes.
[filename](tutorial-actions.test.ts ':include :type=code :fragment=actions2') ```
--8<- "docs/tutorial-actions.test.ts:actions2"
```
### Adding a mutation ### Adding a mutation
Mutations are the reducing functions associated to actions. They Mutations are the reducing functions associated to actions. They
are defined via the `addMutation` method. are defined via the `addMutation` method.
[filename](tutorial-actions.test.ts ':include :type=code :fragment=addMutation') ```
--8<- "docs/tutorial-actions.test.ts:addMutation"
```
Note that in the mutation we take the liberty of changing the state directly. Note that in the mutation we take the liberty of changing the state directly.
@ -61,7 +70,9 @@ The `getState` and `dispatch` functions are augmented with the dux selectors,
and actions, respectively. The selectors and actions are also available and actions, respectively. The selectors and actions are also available
from the api object. from the api object.
[filename](tutorial-effects.test.ts ':include :type=code :fragment=effects-1') ```
--8<- "docs/tutorial-effects.test.ts:effects-1"
```
## Selectors ## Selectors
@ -70,7 +81,9 @@ The `getState` method of a dux store will be augmented
with its selectors, with the first call for the state already with its selectors, with the first call for the state already
curried for you. curried for you.
[filename](tutorial-selectors.test.ts ':include :type=code :fragment=sel1') ```
--8<- "docs/tutorial-selectors.test.ts:sel1"
```
## Subduxes ## Subduxes
@ -83,7 +96,9 @@ 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 the global state. This is better understood by working out an example, so
let's recap on the Todos dux we have so far: let's recap on the Todos dux we have so far:
[filename](tutorial-monolith.test.ts ':include :type=code :fragment=mono') ``` title="todos-monolith.ts"
--8<- "docs/tutorial-monolith.test.ts:mono"
```
This store has two main components: the `nextId`, and the `todos` collection. This store has two main components: the `nextId`, and the `todos` collection.
The `todos` collection is itself composed of the individual `todo`s. Let's The `todos` collection is itself composed of the individual `todo`s. Let's
@ -91,19 +106,27 @@ create upduxes for each of those.
### NextId dux ### NextId dux
[filename](nextId.ts ':include :type=code :fragment=dux') ``` js title="nextId.ts"
--8<- "docs/nextId.ts:dux"
```
### Todo updux ### Todo updux
[filename](todo.ts ':include :type=code') ``` title="todo.ts"
--8<- "docs/todo.ts"
```
### Todos updux ### Todos updux
[filename](todos.ts ':include :type=code') ``` title="todos.ts"
--8<- "docs/todos.ts"
```
### Main store ### Main store
[filename](todoList.ts ':include :type=code') ``` title="todoList.ts"
--8<- "docs/todoList.ts"
```
Tadah! We had to define the `addTodo` effect at the top level as it needs to 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` access the `getNextId` selector from `nextId` and the `addTodoWithId`