Merge branch 'selectors-new' into rewrite
This commit is contained in:
commit
63d8235346
27
docs/tutorial-selectors.test.js
Normal file
27
docs/tutorial-selectors.test.js
Normal 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);
|
||||||
|
} );
|
@ -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)
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
19
src/Updux.js
19
src/Updux.js
@ -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) => {
|
||||||
|
@ -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');
|
||||||
|
Loading…
Reference in New Issue
Block a user