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.
|
||||
|
||||
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,
|
||||
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.
|
||||
|
||||
## 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,
|
||||
nextId: 1,
|
||||
todos: [],
|
||||
}
|
||||
});
|
||||
@ -32,21 +33,26 @@ initial state will be automatically set:
|
||||
```js
|
||||
const store = todosDux.createStore();
|
||||
|
||||
console.log(store.getState()); // prints { next_id: 1, todos: [] }
|
||||
console.log(store.getState()); // prints { nextId: 1, todos: [] }
|
||||
```
|
||||
|
||||
## Add actions
|
||||
|
||||
This is all good, but a little static. Let's add actions!
|
||||
```js
|
||||
import { createAction } from 'updux';
|
||||
|
||||
const addTodo = createAction('addTodo');
|
||||
const todoDone = createAction('todoDone');
|
||||
|
||||
const todosDux = new Updux({
|
||||
initial: {
|
||||
next_id: 1,
|
||||
nextId: 1,
|
||||
todos: [],
|
||||
},
|
||||
{
|
||||
addTodo: null,
|
||||
todoDone: null,
|
||||
actions: {
|
||||
addTodo,
|
||||
todoDone,
|
||||
}
|
||||
});
|
||||
```
|
||||
@ -54,10 +60,11 @@ const todosDux = new Updux({
|
||||
### Accessing actions
|
||||
|
||||
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
|
||||
console.log( todosDux.actions.addTodo('write tutorial') );
|
||||
// prints { type: 'addTodo', payload: 'write tutorial' }
|
||||
// => { type: 'addTodo', payload: 'write tutorial' }
|
||||
```
|
||||
### Adding a mutation
|
||||
|
||||
@ -65,7 +72,7 @@ Mutations are the reducing functions associated to actions. They
|
||||
are defined via the `setMutation` method:
|
||||
|
||||
|
||||
```js
|
||||
```js
|
||||
todosDux.setMutation( 'addTodo', description => ({next_id: id, todos}) => ({
|
||||
next_id: 1 + id,
|
||||
todos: [...todos, { description, id, done: false }]
|
||||
@ -403,3 +410,4 @@ const myDux = new Updux({
|
||||
[immer]: https://www.npmjs.com/package/immer
|
||||
[lodash]: https://www.npmjs.com/package/lodash
|
||||
[ts-action]: https://www.npmjs.com/package/ts-action
|
||||
[remeda]: remedajs.com/
|
||||
|
@ -1,3 +1,5 @@
|
||||
import Updux from './Updux';
|
||||
|
||||
export { createAction } from '@reduxjs/toolkit';
|
||||
|
||||
export default Updux;
|
||||
|
@ -38,3 +38,20 @@ test('initial to createStore', () => {
|
||||
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