A change memoize for reselect
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.babelrc
.eslintignore
.eslintrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
CODE_OF_CONDUCT.md
LICENSE.md
README.md
package.json
webpack.config.js

README.md

Reselect Change Memoize

Build Status npm version

A simple memoize function for reselect which performs a callback everytime the result changes.

This package contains three exports:

  • a changeMemoize
  • createSelectorWithChangeCallback which allows you to easily substitute createSelector
  • a createSelector helper which enables change logging if not in production and allows you to name selectors

changeMemoize

import { createSelectorCreator } from 'reselect';
import { changeMemoize } from 'reselect-change-memoize';

const myCallback = function(lastArgs, lastResult, newArgs, newResult) {
  // Your code
};

const createSelector = createSelectorCreator(changeMemoize, myCallback);

createSelectorWithChangeCallback

import { createSelectorWithChangeCallback } from 'reselect-change-memoize';

const myCallback = function(lastArgs, lastResult, newArgs, newResult) {
  // Your code
};

const selector = createSelectorWithChangeCallback(
  myCallback,
  (state) => state,
  (state) => {
    return { state };
  }
);

selector({ initial: 'state' });

createSelector

import { createSelector } from 'reselect-change-memoize';

const selector1 = createSelector(
  'An awesome selector',
  (state) => state,
  (state) => {
    return { selector1: state };
  }
);
const selector2 = createSelector(
  'A second awesome selector which uses the first awesome selector',
  selector1,
  (state) => {
    return { selector2: state };
  }
);
// The name doesn't have to be provided
const selector3 = createSelector(
  selector1,
  (state) => {
    return { selector2: state };
  }
);
selector2({ initial: 'state' });
selector1({ second: 'state' });
selector3({ second: 'state' });

produces

- An awesome selector 
	lastArgs: {} 
	lastResult: {} 
	newArgs: [ { initial: 'state' } ] 
	newResult: { selector1: { initial: 'state' } }
- A second awesome selector which uses the first awesome selector 
	lastArgs: {} 
	lastResult: {} 
	newArgs: [ { selector1: { initial: 'state' } } ] 
	newResult: { selector2: { selector1: { initial: 'state' } } }
- An awesome selector 
	lastArgs: [ { initial: 'state' } ] 
	lastResult: { selector1: { initial: 'state' } } 
	newArgs: [ { second: 'state' } ] 
	newResult: { selector1: { second: 'state' } }
- unknown 
	lastArgs: {} 
	lastResult: {} 
	newArgs: [ { second: 'state' } ] 
	newResult: { selector3: { second: 'state' } }