add actions test

This commit is contained in:
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. 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/

View File

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

View File

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