Tools for working with the reselect library: Check selector dependencies, inputs, outputs, and recomputations at any time!
-
Install the Package
npm install -s reselect-tools
-
(Optional) Create a file
reselect.config.json
in your project root directory (recommended).{ "out": "src/redux/selectorIndex.ts", "src": [ "src/**/*.ts", "src/**/*.tsx", "!src/**/*.test.ts" ], "tsConfigPath": "./tsconfig.json" }
out
: Where the index file will be createdsrc
: Array of locations to scan or exclude using!
operatortsConfigPath
: location of your typescript config fileWARNING: Work only with Typescript projects. Next releases will provide a more generic parser also for .js files.
-
Run in your Terminal:
reselect-tools
-
Configure the library in your project following these steps:
- for your convenience use your configureStore file:
Example:
import {createStore, applyMiddleware, combineReducers} from 'redux'; import toDoApp from './modules/toDoApp'; import {composeWithDevTools} from "redux-devtools-extension"; // IMPORT YOUR INDEX AND RESELECT-TOOLS import * as selectors from './selectorIndex'; import * as ReselectTools from 'reselect-tools' const reducer = combineReducers({ toDoApp }); const store = createStore(reducer, composeWithDevTools( applyMiddleware(), )); // USE .getStateWith() method in order to get the current state // which will be used internally. ReselectTools.getStateWith(() => store.getState()); // USE .registerSelectors() method passing your generated selectors index ReselectTools.registerSelectors(selectors); ... export default configureStore;
-
Install the Chrome Extension using this folder:
packages/reselect-tool-extension/build
. -
Collaborate!
If you're using an unsupported browser, or aren't happy with the extension, you can still get at the data.
The dev tools bind to your app via this global:
window.__RESELECT_TOOLS__
Next releases will include:
- Improved DEV experience using a Reselect Library Wrapper in order to automatically register our selectors without adding extra code in your project.
- Listen all the selector changes using Observables
- Add Selectors Javascript Code and file paths in the details column
- Improved UI with a new and useful graph representation.
- Firefox Extension or Electron App.
MIT