starting on the tutorial
This commit is contained in:
parent
36b19316ba
commit
d12d114af8
62
docs/tutorial.md
Normal file
62
docs/tutorial.md
Normal 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
26
docs/tutorial.test.js
Normal 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'
|
||||||
|
})
|
||||||
|
});
|
@ -110,7 +110,7 @@ export class Updux {
|
|||||||
|
|
||||||
for (const action in this.actions) {
|
for (const action in this.actions) {
|
||||||
store.dispatch[action] = (...args) => {
|
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;
|
return store;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
import { test, expect } from 'vitest';
|
import { test, expect } from 'vitest';
|
||||||
import { Updux } from './Updux.js';
|
import { Updux } from './Updux.js';
|
||||||
|
|
||||||
test( "basic createStore", async () => {
|
test('basic createStore', async () => {
|
||||||
const foo = new Updux({
|
const foo = new Updux({
|
||||||
initial: { a: 1 },
|
initial: { a: 1 },
|
||||||
actions: {
|
actions: {
|
||||||
a1: null,
|
a1: null,
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const store = foo.createStore();
|
const store = foo.createStore();
|
||||||
|
1
src/index.js
Normal file
1
src/index.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { Updux, dux } from './Updux.js';
|
Loading…
Reference in New Issue
Block a user