Switch redux-logger to redux devtools for easier debugging

This commit is contained in:
Christopher Joe 2016-08-11 16:27:57 +12:00 committed by Ingo Schommer
parent 6c3a34ab1d
commit 42d36da3fb
3 changed files with 18 additions and 6 deletions

View File

@ -1,7 +1,6 @@
import BootRoutes from './BootRoutes'; import BootRoutes from './BootRoutes';
import { combineReducers, createStore, applyMiddleware } from 'redux'; import { combineReducers, createStore, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk'; import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import Config from 'lib/Config'; import Config from 'lib/Config';
import reducerRegister from 'lib/ReducerRegister'; import reducerRegister from 'lib/ReducerRegister';
import injector from 'lib/Injector'; import injector from 'lib/Injector';
@ -44,11 +43,14 @@ function appBoot() {
const env = Config.get('environment'); const env = Config.get('environment');
const debugging = Config.get('debugging'); const debugging = Config.get('debugging');
if (env === 'dev' && debugging) { let runMiddleware = applyMiddleware(...middleware);
middleware.push(createLogger()); const devTools = window.devToolsExtension;
if (env === 'dev' && debugging && typeof devTools === 'function') {
runMiddleware = compose(applyMiddleware(...middleware), devTools());
} }
const createStoreWithMiddleware = applyMiddleware(...middleware)(createStore); const createStoreWithMiddleware = runMiddleware(createStore);
const store = createStoreWithMiddleware(rootReducer, initialState); const store = createStoreWithMiddleware(rootReducer, initialState);
// Set the initial config state. // Set the initial config state.

View File

@ -13,6 +13,16 @@ simple checkbox.
For a deeper introduction to the inner workings of the CMS, please refer to our For a deeper introduction to the inner workings of the CMS, please refer to our
guide on [CMS Architecture](/developer_guides/customising_the_admin_interface/cms_architecture). guide on [CMS Architecture](/developer_guides/customising_the_admin_interface/cms_architecture).
## Redux Devtools
It's important to be able to view the state of the React application when you're debugging and
building the interface.
To be able to view the state, you'll need to be in a dev environment
and have the [Redux Devtools](https://github.com/zalmoxisus/redux-devtools-extension)
installed on Google Chrome or Firefox, which can be found by searching with your favourite search
engine.
## Overload a CMS template ## ## Overload a CMS template ##
If you place a template with an identical name into your application template If you place a template with an identical name into your application template

View File

@ -253,5 +253,5 @@ bundle at runtime.
The advantage of using externals is a reduced file size. The browser only needs to download The advantage of using externals is a reduced file size. The browser only needs to download
`jQuery` once (inside `bundle-a.js`) rather than it being included in multiple bundles. `jQuery` once (inside `bundle-a.js`) rather than it being included in multiple bundles.
Core dependencies are are bundled and exposed in the `bundle-lib.js` file. Most of the libraries Core dependencies are bundled and exposed in the `bundle-lib.js` file. Most of the libraries
a CMS developer requires are available a externals in that bundle. a CMS developer requires are available a externals in that bundle.