add actions test

main
Yanick Champoux 2023-03-02 13:10:20 -05:00
parent ad20f908a7
commit 90a2171cc7
3 changed files with 39 additions and 12 deletions

View File

@ -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/

View File

@ -1,3 +1,5 @@
import Updux from './Updux';
export { createAction } from '@reduxjs/toolkit';
export default Updux;

View File

@ -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',
});
});