starting on the tutorial

This commit is contained in:
Yanick Champoux 2022-08-26 15:51:00 -04:00
parent 36b19316ba
commit d12d114af8
5 changed files with 94 additions and 6 deletions

62
docs/tutorial.md Normal file
View File

@ -0,0 +1,62 @@
# Tutorial
This tutorial walks you through the features of `Updux` using the
time-honored example of the implementation of Todo list store.
We'll be using
[updeep](https://www.npmjs.com/package/updeep) to
help with immutability and deep merging,
but that's totally optional. If `updeep` is not your bag,
it can easily be substitued with, say, [immer][], [lodash][], or even
plain JavaScript.
## Definition of the state
To begin with, let's define that has nothing but an initial state.
```js
import { Updux } from 'updux';
const todosDux = new Updux({
initial: {
next_id: 1,
todos: [],
}
});
```
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
initial state will be automatically set:
```js
const store = todosDux.createStore();
console.log(store.getState()); // prints { next_id: 1, todos: [] }
```
## Add actions
This is all good, but a little static. Let's add actions!
```js
const todosDux = new Updux({
initial: {
next_id: 1,
todos: [],
},
{
addTodo: null,
todoDone: null,
}
});
```
### Accessing actions
Once an action is defined, its creator is accessible via the `actions` accessor.
```js
console.log( todosDux.actions.addTodo('write tutorial') );
// prints { type: 'addTodo', payload: 'write tutorial' }
```

26
docs/tutorial.test.js Normal file
View File

@ -0,0 +1,26 @@
import { test, expect } from 'vitest';
import { Updux } from '../src/index.js';
test( "basic checks", async () => {
const todosDux = new Updux({
initial: {
next_id: 1,
todos: [],
},
actions: {
addTodo: null,
todoDone: null,
}
});
const store = todosDux.createStore();
expect(store.getState()).toEqual({ next_id: 1, todos: [] });
expect(store.actions.addTodo("learn updux")).toMatchObject({
type: 'addTodo', payload: 'learn updux'
})
});

View File

@ -110,7 +110,7 @@ export class Updux {
for (const action in this.actions) {
store.dispatch[action] = (...args) => {
return store.dispatch(this.actions[action](...(args)));
return store.dispatch(this.actions[action](...args));
};
}
@ -118,5 +118,4 @@ export class Updux {
return store;
}
}

View File

@ -1,12 +1,12 @@
import { test, expect } from 'vitest';
import { Updux } from './Updux.js';
test( "basic createStore", async () => {
test('basic createStore', async () => {
const foo = new Updux({
initial: { a: 1 },
actions: {
a1: null,
}
},
});
const store = foo.createStore();

1
src/index.js Normal file
View File

@ -0,0 +1 @@
export { Updux, dux } from './Updux.js';