selectors in tutorial

typescript
Yanick Champoux 2022-08-29 11:56:30 -04:00
parent c5ca566c12
commit 141d959d28
4 changed files with 77 additions and 11 deletions

View File

@ -0,0 +1,27 @@
import { test, expect } from 'vitest';
import { Updux } from '../src/index.js';
test( 'selectors', () => {
const dux = new Updux({
initial: { a: 1, b: 2 },
selectors: {
getA: ({a}) => a,
getBPlus: ({b}) => addition => b + addition,
},
subduxes: {
subbie: new Updux({
initial: { d: 3 },
selectors: {
getD: ({d}) => d
}
})
}
})
const store = dux.createStore();
expect( store.getState.getA() ).toEqual(1);
expect( store.getState.getBPlus(7) ).toEqual(9);
expect( store.getState.getD() ).toEqual(3);
} );

View File

@ -126,8 +126,49 @@ store.dispatch.addTodo('Do the thing');
### Catch-all effect ### Catch-all effect
It is possible to have an effect match all actions via the special `*` token. It is possible to have an effect match all actions via the special `*` token.
``` ```
todosUpdux.addEffect('*', () => next => action => { todosUpdux.addEffect('*', () => next => action => {
console.log( 'seeing action fly by:', action ); console.log( 'seeing action fly by:', action );
next(action); next(action);
}); });
```
## Adding selectors
Selectors can be defined to get data derived from the state.
From now you should know the drill: selectors can be defined at construction
time or via `setSelector`.
```
const getTodoById = ({todos}) => targetId => todos.find(({id}) => id === targetId);
const todosUpdux = new Updux({
selectors: {
getTodoById
}
})
```
or
```
todosDux.setSelector('getTodoById', getTodoById);
```
### Accessing selectors
The `getState` method of a dux store is augmented
with its selectors, with the first call for the state already
called in for you.
```js
const store = todosDux.createStore();
console.log(
todosUpdux.getState.getTodoById(1)
);
```

View File

@ -148,20 +148,17 @@ export class Updux {
store.actions = this.actions; store.actions = this.actions;
// store.selectors = this.selectors; store.selectors = this.selectors;
// store.getState = R.merge( Object.entries(this.selectors).forEach(([selector, fn]) => {
// store.getState, store.getState[selector] = (...args) => {
// R.mapValues(this.selectors, (selector) => { let result = fn(store.getState());
// return (...args) => {
// let result = selector(store.getState());
// if (typeof result === 'function') return result(...args); if (typeof result === 'function') return result(...args);
// return result; return result;
// }; };
// }) });
// );
for (const action in this.actions) { for (const action in this.actions) {
store.dispatch[action] = (...args) => { store.dispatch[action] = (...args) => {

View File

@ -11,6 +11,7 @@ test('basic createStore', async () => {
const store = foo.createStore(); const store = foo.createStore();
expect(store.getState).toBeTypeOf('function');
expect(store.getState()).toEqual({ a: 1 }); expect(store.getState()).toEqual({ a: 1 });
expect(store.actions.a1).toBeTypeOf('function'); expect(store.actions.a1).toBeTypeOf('function');