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) {
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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
1
src/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { Updux, dux } from './Updux.js';
|
Loading…
Reference in New Issue
Block a user