diff --git a/CHANGELOG.md b/CHANGELOG.md index 0451586..b36313e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,9 +11,11 @@ and **contains migration instructions**. Release | What | *When* ---------|-------------------------------------------------|------------------ +[v0.1.2] | Auto Redux DevTools Integration | *March 29, 2018* [v0.1.1] | react-native android patch | *March 7, 2018* [v0.1.0] | Initial Release | *March 6, 2018* +[v0.1.2]: #v012---auto-redux-devtools-integration-march-29-2018 [v0.1.1]: #v011---react-native-android-patch-march-7-2018 [v0.1.0]: #v010---initial-release-march-6-2018 @@ -27,13 +29,41 @@ TEMPLATE: [GitHub Content](https://github.com/KevinAst/feature-redux/tree/vn.n.n) • [GitHub Release](https://github.com/KevinAst/feature-redux/releases/tag/vn.n.n) +• +[Diff](see below) RUNNING CONTENT (pop out as needed) ... +- adorn bullets with following bolded prefix + **Added**: ... for new features + **Changed**: ... for changes in existing functionality + **Deprecated**: ... for soon-to-be removed features + **Removed**: ... for now removed features + **Fixed**: ... for any bug fixes + **Enhanced**: ... for enhancements + **Security**: ... in case of vulnerabilities + **Docs**: ... changes in documentation + UNRELEASED ******************************************************************************** --> + +## v0.1.2 - Auto Redux DevTools Integration *(March 29, 2018)* + +[GitHub Content](https://github.com/KevinAst/feature-redux/tree/v0.1.2) +• +[GitHub Release](https://github.com/KevinAst/feature-redux/releases/tag/v0.1.2) +• +[Diff](https://github.com/KevinAst/feature-redux/compare/v0.1.1...v0.1.2) + +**NOTE**: This release is a **non-breaking change** _(i.e. no API was affected)_. + +- **Enhanced**: Integration with Redux DevTools is automatically + configured (when detected). + +- **Docs**: Removed action-u reference from example code, using a more + conventional "defined constant" action type. @@ -43,10 +73,12 @@ UNRELEASED ********************************************************************* [GitHub Content](https://github.com/KevinAst/feature-redux/tree/v0.1.1) • [GitHub Release](https://github.com/KevinAst/feature-redux/releases/tag/v0.1.1) +• +[Diff](https://github.com/KevinAst/feature-redux/compare/v0.1.0...v0.1.1?short_path=4ac32a7#diff-4ac32a78649ca5bdd8e0ba38b7006a1e) **NOTE**: This release is a **non-breaking change** _(i.e. no API was affected)_. -- A patch was applied in support of **react-native android**. +- **Fixed**: A patch was applied in support of **react-native android**. When running react-native under android, receiving the following exception: diff --git a/README.md b/README.md index 690df4a..206b841 100644 --- a/README.md +++ b/README.md @@ -255,35 +255,25 @@ single-source-of-truth, however importing feature from your action modules is problematic _(the [`Feature`] object will most likely not be fully resolved during in-line code expansion)_. As a result, a **best practice** is to import a separate `featureName` constant (*that -simply holds the name*). Here is an example using [action-u] (_see: -`**3**` below_): +simply holds the name*). Here is an example: -**src/feature/featureA/featureName.js** +**src/feature/timer/featureName.js** ```js -export default 'featureA'; // **3** +export default 'timer'; ``` -**src/feature/featureA/actions.js** +**src/feature/timer/actions.js** ```js -import {generateActions} from 'action-u'; -import featureName from './featureName'; +import featureName from './featureName'; -export default generateActions.root({ - [featureName]: { // **3** prefix all actions with our feature name, guaranteeing uniqueness app-wide! - action1: { // actions.action1(): Action - actionMeta: {}, - }, - action2: { // actions.action2(): Action - actionMeta: {}, - }, - etc... - }, -}); -``` +// action type constants +export const TIMER_START = `${featureName}.TIMER_START`; +export const TIMER_CANCEL = `${featureName}.TIMER_CANCEL`; +export const TIMER_RESET = `${featureName}.TIMER_RESET`; +export const TIMER_END = `${featureName}.TIMER_END`; -This example results in [actions] of type: -- `featureA.action1` -- `featureA.action2` +... snip snip +``` @@ -496,9 +486,12 @@ this process (_i.e. the inputs and outputs_) are documented here. 3. **Other**: - For good measure, **feature-redux** promotes the [redux store] - through the `Aspect.getReduxStore()` method. This provides direct - access to the [store] to any external process that needs it. + - For good measure, **feature-redux** promotes the [redux store] + through the `Aspect.getReduxStore()` method. This provides direct + access to the [store] to any external process that needs it. + + - Integration with Redux DevTools is automatically configured (when + detected). ### Error Conditions diff --git a/package.json b/package.json index c21ecbb..e2d5420 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "feature-redux", - "version": "0.1.1", + "version": "0.1.2", "description": "feature-u redux integration", "main": "lib/index.js", "browser": { diff --git a/src/reducerAspect.js b/src/reducerAspect.js index ab4fa29..06f6464 100644 --- a/src/reducerAspect.js +++ b/src/reducerAspect.js @@ -26,6 +26,7 @@ export default createAspect({ config: { allowNoReducers$: false, // PUBLIC: client override to: true || [{reducerFn}] createReduxStore$, // HIDDEN: createReduxStore$(appReducer, middlewareArr): appStore + reduxDevToolHook$, // HIDDEN: reduxDevToolHook$(): {enhancer$, compose$} }, }); @@ -202,14 +203,38 @@ function assembleAspectResources(app, aspects) { * @private */ function createReduxStore$(appReducer, middlewareArr) { + // auto configure Redux DevTools (when detected) + const {enhancer$, compose$} = this.reduxDevToolHook$(); + // define our Redux app-wide store WITH optional middleware regsistration return middlewareArr.length === 0 - ? createStore(appReducer) - : createStore(appReducer, - compose(applyMiddleware(...middlewareArr))); + ? createStore(appReducer, enhancer$) // NOTE: passing enhancer as last argument requires redux@>=3.1.0 + : createStore(appReducer, compose$(applyMiddleware(...middlewareArr))); +} + + +/** + * Auto detect Redux Dev Tools when installed in browser. + * + * NOTE: It's OK to use Redux Dev Tools in production: http://bit.ly/rdtOkForProd + * + * @return {enhancer$, compose$} to be used in creating redux store. + * + * @private + */ +function reduxDevToolHook$() { + const win = window || {}; // no-op in non-browser env (i.e. react-native) + const extension = win.__REDUX_DEVTOOLS_EXTENSION__; + const enhancer$ = extension && extension(); + const compose$ = win.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; + if (extension) { + logf.force('createReduxStore$() hooking into Redux DevTools (installed in your browser)'); + } + return {enhancer$, compose$}; } + /** * Promote our redux store (for good measure), just in case some * external process needs it.