Create memoized selectors, an alternative to reselect.
import { createSelector, pipe, combine } from '@nilscox/selektor';
const state = {
todos: [
{ id: 1, completed: true },
{ id: 2, completed: false },
],
currentTodoId: 2,
};
type State = typeof state;
// create a memoized selector
const selectTodos = createSelector((state: State) => state.todos);
// create a new selector from another selector's output
const selectFirstTodo = pipe(selectTodos, (todos) => todos[0]);
selectFirstTodo(state); // { id: 1, completed: true }
// introduce extra parameters
const selectFilteredTodos = pipe(selectTodos, (todos, completed: boolean) => {
return todos.filter((todo) => todo.completed === completed);
});
selectFilteredTodos(state, false); // [{ id: 2, completed: false }]
const selectCurrentTodoId = createSelector((state) => state.currentTodoId);
// combine outputs from multiple selectors
const selectCurrentTodo = combine(selectTodos, selectCurrentTodoId, (todos, currentTodoId) => {
return todos.find((todo) => todo.id === currentTodoId);
});
selectCurrentTodo(state); // { id: 2, completed: false }<your package manager's install command> @nilscox/selektor
createSelector(fn)
Creates a memoized selector. When the selector is called, the function fn is called and its returned value is cached. If the selector is called again with the same parameters, fn is not called and the cached value is returned.
const state = { foo: 42 };
const selectFoo = createSelector((state) => state.foo);
selectFoo(state); // 42pipe(input, output)
Create a selector from another selector's output, optionally adding parameters.
const state = { foo: { bar: 42 } };
const selectFoo = createSelector((state) => state.foo);
const selectBar = pipe(selectFoo, (foo) => foo.bar);
selectBar(state); // 42
const selectBarPlusNum = pipe(selectFoo, (foo, num) => foo.bar + num);
selectBarPlusNum(state, 9); // 51combine(...inputs, output)
Combine multiple selector's outputs into a new selector. The results of the input selectors will be given as parameters to the output selector.
const state = { foo: 42, bar: 51 };
const selectFoo = createSelector((state) => state.foo);
const selectBar = createSelector((state) => state.bar);
const selectForPlusBar = combine(selectFoo, selectBar, (foo, bar) => foo + bar);
selectFooPlusBar(state); // 93The default memoization only remembers the last call of the memoized function, similar to memoize-one. Use createPipe and createCombine to create custom pipe and combine functions with a custom memoization function.
function memoize(fn) {
return (...params) => {
// custom memoization logic
};
}
const pipe = createPipe(memoize);
const combine = createCombine(memoize);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent