add actions test
This commit is contained in:
parent
ad20f908a7
commit
90a2171cc7
@ -4,22 +4,23 @@ This tutorial walks you through the features of `Updux` using the
|
|||||||
time-honored example of the implementation of Todo list store.
|
time-honored example of the implementation of Todo list store.
|
||||||
|
|
||||||
We'll be using
|
We'll be using
|
||||||
[updeep](https://www.npmjs.com/package/updeep) to
|
[@yanick/updeep-remeda](https://www.npmjs.com/package/@yanick/updeep-remeda) to
|
||||||
help with immutability and deep merging,
|
help with immutability and deep merging,
|
||||||
but that's totally optional. If `updeep` is not your bag,
|
but that's totally optional. If `updeep` is not your bag,
|
||||||
it can easily be substitued with, say, [immer][], [lodash][], or even
|
it can easily be substitued with, say, [immer][],
|
||||||
|
[remeda][],
|
||||||
|
[lodash][], or even
|
||||||
plain JavaScript.
|
plain JavaScript.
|
||||||
|
|
||||||
## Definition of the state
|
## Definition of the state
|
||||||
|
|
||||||
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.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import Updux from 'updux';
|
import Updux from 'updux';
|
||||||
|
|
||||||
const todosDux = new Updux({
|
const todosDux = new Updux({
|
||||||
initial: {
|
initial: {
|
||||||
next_id: 1,
|
nextId: 1,
|
||||||
todos: [],
|
todos: [],
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -32,21 +33,26 @@ initial state will be automatically set:
|
|||||||
```js
|
```js
|
||||||
const store = todosDux.createStore();
|
const store = todosDux.createStore();
|
||||||
|
|
||||||
console.log(store.getState()); // prints { next_id: 1, todos: [] }
|
console.log(store.getState()); // prints { nextId: 1, todos: [] }
|
||||||
```
|
```
|
||||||
|
|
||||||
## Add actions
|
## Add actions
|
||||||
|
|
||||||
This is all good, but a little static. Let's add actions!
|
This is all good, but a little static. Let's add actions!
|
||||||
```js
|
```js
|
||||||
|
import { createAction } from 'updux';
|
||||||
|
|
||||||
|
const addTodo = createAction('addTodo');
|
||||||
|
const todoDone = createAction('todoDone');
|
||||||
|
|
||||||
const todosDux = new Updux({
|
const todosDux = new Updux({
|
||||||
initial: {
|
initial: {
|
||||||
next_id: 1,
|
nextId: 1,
|
||||||
todos: [],
|
todos: [],
|
||||||
},
|
},
|
||||||
{
|
actions: {
|
||||||
addTodo: null,
|
addTodo,
|
||||||
todoDone: null,
|
todoDone,
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
@ -54,10 +60,11 @@ const todosDux = new Updux({
|
|||||||
### Accessing actions
|
### Accessing actions
|
||||||
|
|
||||||
Once an action is defined, its creator is accessible via the `actions` accessor.
|
Once an action is defined, its creator is accessible via the `actions` accessor.
|
||||||
|
This is not yet terribly exciting, but it'll get better once we begin using
|
||||||
|
subduxes.
|
||||||
```js
|
```js
|
||||||
console.log( todosDux.actions.addTodo('write tutorial') );
|
console.log( todosDux.actions.addTodo('write tutorial') );
|
||||||
// prints { type: 'addTodo', payload: 'write tutorial' }
|
// => { type: 'addTodo', payload: 'write tutorial' }
|
||||||
```
|
```
|
||||||
### Adding a mutation
|
### Adding a mutation
|
||||||
|
|
||||||
@ -403,3 +410,4 @@ const myDux = new Updux({
|
|||||||
[immer]: https://www.npmjs.com/package/immer
|
[immer]: https://www.npmjs.com/package/immer
|
||||||
[lodash]: https://www.npmjs.com/package/lodash
|
[lodash]: https://www.npmjs.com/package/lodash
|
||||||
[ts-action]: https://www.npmjs.com/package/ts-action
|
[ts-action]: https://www.npmjs.com/package/ts-action
|
||||||
|
[remeda]: remedajs.com/
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
import Updux from './Updux';
|
import Updux from './Updux';
|
||||||
|
|
||||||
|
export { createAction } from '@reduxjs/toolkit';
|
||||||
|
|
||||||
export default Updux;
|
export default Updux;
|
||||||
|
@ -38,3 +38,20 @@ test('initial to createStore', () => {
|
|||||||
b: 4,
|
b: 4,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test.todo('actions', () => {
|
||||||
|
const addTodo = createAction('addTodo');
|
||||||
|
const todoDone = createAction('todoDone');
|
||||||
|
|
||||||
|
const todosDux = new Updux({
|
||||||
|
actions: {
|
||||||
|
addTodo,
|
||||||
|
todoDone,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(todosDux.actions.addTodo('write tutorial')).toEqual({
|
||||||
|
type: 'addTodo',
|
||||||
|
payload: 'write tutorial',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user