diff --git a/admin/client/src/boot/index.js b/admin/client/src/boot/index.js index b9479b1ec..0b11063aa 100644 --- a/admin/client/src/boot/index.js +++ b/admin/client/src/boot/index.js @@ -1,7 +1,6 @@ import BootRoutes from './BootRoutes'; -import { combineReducers, createStore, applyMiddleware } from 'redux'; +import { combineReducers, createStore, applyMiddleware, compose } from 'redux'; import thunkMiddleware from 'redux-thunk'; -import createLogger from 'redux-logger'; import Config from 'lib/Config'; import reducerRegister from 'lib/ReducerRegister'; import injector from 'lib/Injector'; @@ -44,11 +43,14 @@ function appBoot() { const env = Config.get('environment'); const debugging = Config.get('debugging'); - if (env === 'dev' && debugging) { - middleware.push(createLogger()); + let runMiddleware = applyMiddleware(...middleware); + 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); // Set the initial config state. diff --git a/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/How_Tos/Extend_CMS_Interface.md b/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/How_Tos/Extend_CMS_Interface.md index a0e9c6b19..da38bbac2 100644 --- a/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/How_Tos/Extend_CMS_Interface.md +++ b/docs/en/02_Developer_Guides/15_Customising_the_Admin_Interface/How_Tos/Extend_CMS_Interface.md @@ -13,6 +13,16 @@ simple checkbox. 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). +## 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 ## If you place a template with an identical name into your application template diff --git a/docs/en/05_Contributing/02_Build_Tooling.md b/docs/en/05_Contributing/02_Build_Tooling.md index 24d719d4f..3f8814df3 100644 --- a/docs/en/05_Contributing/02_Build_Tooling.md +++ b/docs/en/05_Contributing/02_Build_Tooling.md @@ -253,5 +253,5 @@ bundle at runtime. 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. -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.