Last active
May 21, 2018 12:45
-
-
Save bstro/2366fc8fae5c99803f942baaef161aac to your computer and use it in GitHub Desktop.
simple selector middleware devtool
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| … | |
| import selectorMiddleware from './selectorMiddleware.js'; | |
| … | |
| export default createStore( | |
| combineReducers({ … }), | |
| applyMiddleware(selectorMiddleware, logger, …) | |
| ); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import selectors as * from '/selectors.js'; | |
| const selectorMiddleware = ({ getState }) => next => action => { | |
| const ret = next(action); | |
| if (process.env.NODE_ENV !== 'production') { | |
| const selectorKeys = Object.keys(selectors); | |
| window.selectors = {}; | |
| for (let key of selectorKeys) { | |
| const selector = selectors[key]; | |
| if (!fp.isFunction(selector)) continue; | |
| const value = selector(getState()); | |
| if (fp.isNil(value)) continue; | |
| window.selectors[key] = value; | |
| } | |
| } | |
| return ret; | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import createSelector from 'reselect'; | |
| import fp from 'lodash/fp'; | |
| export getState = state => state; | |
| export getProps = (_, props) => props; | |
| // ^ just including this to mention I like to make prop access explicit, as it reminds | |
| // me there's an explicit coupling introduced by using component props in a selector. | |
| export const getEntities => createSelector(getState, fp.get('entities')); | |
| export const getArticles => createSelector(getEntities, fp.get('articles')); | |
| … |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment