From 1e609dd40859092704b7b3a9661a08e6c9e1dea8 Mon Sep 17 00:00:00 2001 From: Ken Date: Sun, 24 Feb 2019 14:16:30 -0800 Subject: [PATCH] making this cleaner with composeWithDevTool --- package.json | 1 + step2-06/demo/src/index.tsx | 12 +++--------- step2-06/exercise/src/index.tsx | 21 ++++++++++----------- step2-07/demo/src/index.tsx | 12 +++--------- step2-07/exercise/src/index.tsx | 12 +++--------- step2-08/demo/src/index.tsx | 13 +++---------- step2-08/exercise/src/index.tsx | 13 +++---------- step2-09/demo/src/index.tsx | 14 ++++---------- step2-09/exercise/src/index.tsx | 14 ++++---------- 9 files changed, 34 insertions(+), 78 deletions(-) diff --git a/package.json b/package.json index 8636a8d..97dfefb 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "react": "^16.7.0", "react-dom": "^16.7.0", "react-redux": "^6.0.0", + "redux-devtools-extension": "^2.13.8", "redux": "^4.0.1", "redux-starter-kit": "^0.4.3", "redux-thunk": "^2.3.0", diff --git a/step2-06/demo/src/index.tsx b/step2-06/demo/src/index.tsx index e4ca608..84837fc 100644 --- a/step2-06/demo/src/index.tsx +++ b/step2-06/demo/src/index.tsx @@ -1,15 +1,9 @@ import { reducer } from './reducers'; -import { createStore, compose } from 'redux'; +import { createStore } from 'redux'; +import { composeWithDevTools } from 'redux-devtools-extension'; import { actions } from './actions'; -/* Goop for making the Redux dev tool to work */ -declare var window: any; -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; -function createStoreWithDevTool(reducer, initialStore) { - return createStore(reducer, initialStore, composeEnhancers()); -} - -const store = createStoreWithDevTool(reducer, {}); +const store = createStore(reducer, {}, composeWithDevTools()); console.log(store.getState()); diff --git a/step2-06/exercise/src/index.tsx b/step2-06/exercise/src/index.tsx index e4ca608..ac05b3f 100644 --- a/step2-06/exercise/src/index.tsx +++ b/step2-06/exercise/src/index.tsx @@ -1,19 +1,18 @@ import { reducer } from './reducers'; -import { createStore, compose } from 'redux'; +import { createStore } from 'redux'; +import { composeWithDevTools } from 'redux-devtools-extension'; import { actions } from './actions'; -/* Goop for making the Redux dev tool to work */ -declare var window: any; -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; -function createStoreWithDevTool(reducer, initialStore) { - return createStore(reducer, initialStore, composeEnhancers()); -} - -const store = createStoreWithDevTool(reducer, {}); +const store = createStore(reducer, {}, composeWithDevTools()); console.log(store.getState()); -store.dispatch(actions.addTodo('hello')); -store.dispatch(actions.addTodo('world')); +/* +TODO: dispatch several actions and see the effect to the state inside the Redux devtool + +store.dispatch(actions.???); +store.dispatch(actions.???); +store.dispatch(actions.???); +*/ console.log(store.getState()); diff --git a/step2-07/demo/src/index.tsx b/step2-07/demo/src/index.tsx index 1528004..ce6f3f0 100644 --- a/step2-07/demo/src/index.tsx +++ b/step2-07/demo/src/index.tsx @@ -1,20 +1,14 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { reducer } from './reducers'; -import { createStore, compose } from 'redux'; +import { createStore } from 'redux'; import { Provider } from 'react-redux'; import { TodoApp } from './components/TodoApp'; import { actions } from './actions'; import { initializeIcons } from '@uifabric/icons'; +import { composeWithDevTools } from 'redux-devtools-extension'; -/* Goop for making the Redux dev tool to work */ -declare var window: any; -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; -function createStoreWithDevTool(reducer, initialStore) { - return createStore(reducer, initialStore, composeEnhancers()); -} - -const store = createStoreWithDevTool(reducer, {}); +const store = createStore(reducer, {}, composeWithDevTools()); store.dispatch(actions.addTodo('hello')); store.dispatch(actions.addTodo('world')); diff --git a/step2-07/exercise/src/index.tsx b/step2-07/exercise/src/index.tsx index d9f8f08..6c891b4 100644 --- a/step2-07/exercise/src/index.tsx +++ b/step2-07/exercise/src/index.tsx @@ -1,20 +1,14 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { reducer } from './reducers'; -import { createStore, compose } from 'redux'; +import { createStore } from 'redux'; import { Provider } from 'react-redux'; import { TodoApp } from './components/TodoApp'; import { actions } from './actions'; import { initializeIcons } from '@uifabric/icons'; +import { composeWithDevTools } from 'redux-devtools-extension'; -/* Goop for making the Redux dev tool to work */ -declare var window: any; -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; -function createStoreWithDevTool(reducer, initialStore) { - return createStore(reducer, initialStore, composeEnhancers()); -} - -const store = createStoreWithDevTool(reducer, {}); +const store = createStore(reducer, {}, composeWithDevTools()); store.dispatch(actions.addTodo('hello')); store.dispatch(actions.addTodo('world')); diff --git a/step2-08/demo/src/index.tsx b/step2-08/demo/src/index.tsx index f5cf5a1..ce6f3f0 100644 --- a/step2-08/demo/src/index.tsx +++ b/step2-08/demo/src/index.tsx @@ -1,21 +1,14 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { reducer } from './reducers'; -import { createStore, compose } from 'redux'; +import { createStore } from 'redux'; import { Provider } from 'react-redux'; import { TodoApp } from './components/TodoApp'; import { actions } from './actions'; import { initializeIcons } from '@uifabric/icons'; -import { Store } from './store'; +import { composeWithDevTools } from 'redux-devtools-extension'; -/* Goop for making the Redux dev tool to work */ -declare var window: any; -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; -function createStoreWithDevTool(reducer, initialStore?: Store) { - return createStore(reducer, initialStore, composeEnhancers()); -} - -const store = createStoreWithDevTool(reducer); +const store = createStore(reducer, {}, composeWithDevTools()); store.dispatch(actions.addTodo('hello')); store.dispatch(actions.addTodo('world')); diff --git a/step2-08/exercise/src/index.tsx b/step2-08/exercise/src/index.tsx index f5cf5a1..ce6f3f0 100644 --- a/step2-08/exercise/src/index.tsx +++ b/step2-08/exercise/src/index.tsx @@ -1,21 +1,14 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { reducer } from './reducers'; -import { createStore, compose } from 'redux'; +import { createStore } from 'redux'; import { Provider } from 'react-redux'; import { TodoApp } from './components/TodoApp'; import { actions } from './actions'; import { initializeIcons } from '@uifabric/icons'; -import { Store } from './store'; +import { composeWithDevTools } from 'redux-devtools-extension'; -/* Goop for making the Redux dev tool to work */ -declare var window: any; -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; -function createStoreWithDevTool(reducer, initialStore?: Store) { - return createStore(reducer, initialStore, composeEnhancers()); -} - -const store = createStoreWithDevTool(reducer); +const store = createStore(reducer, {}, composeWithDevTools()); store.dispatch(actions.addTodo('hello')); store.dispatch(actions.addTodo('world')); diff --git a/step2-09/demo/src/index.tsx b/step2-09/demo/src/index.tsx index df6b847..62932c1 100644 --- a/step2-09/demo/src/index.tsx +++ b/step2-09/demo/src/index.tsx @@ -1,20 +1,14 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { reducer } from './reducers'; -import { applyMiddleware, createStore, compose } from 'redux'; +import { applyMiddleware, createStore } from 'redux'; import thunk from 'redux-thunk'; import { Provider } from 'react-redux'; import { TodoApp } from './components/TodoApp'; import { initializeIcons } from '@uifabric/icons'; -import { Store, FilterTypes } from './store'; +import { FilterTypes } from './store'; import * as service from './service'; - -/* Goop for making the Redux dev tool to work */ -declare var window: any; -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; -function createStoreWithDevTool(reducer, initialStore?: Store) { - return createStore(reducer, initialStore, composeEnhancers(applyMiddleware(thunk))); -} +import { composeWithDevTools } from 'redux-devtools-extension'; (async () => { const preloadStore = { @@ -22,7 +16,7 @@ function createStoreWithDevTool(reducer, initialStore?: Store) { filter: 'all' as FilterTypes }; - const store = createStoreWithDevTool(reducer, preloadStore); + const store = createStore(reducer, preloadStore, composeWithDevTools(applyMiddleware(thunk))); initializeIcons(); diff --git a/step2-09/exercise/src/index.tsx b/step2-09/exercise/src/index.tsx index 4b46d99..a015c90 100644 --- a/step2-09/exercise/src/index.tsx +++ b/step2-09/exercise/src/index.tsx @@ -1,20 +1,14 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { reducer } from './reducers'; -import { applyMiddleware, createStore, compose } from 'redux'; +import { applyMiddleware, createStore } from 'redux'; import thunk from 'redux-thunk'; import { Provider } from 'react-redux'; import { TodoApp } from './components/TodoApp'; import { initializeIcons } from '@uifabric/icons'; -import { Store, FilterTypes } from './store'; +import { FilterTypes } from './store'; import * as service from './service'; - -/* Goop for making the Redux dev tool to work */ -declare var window: any; -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; -function createStoreWithDevTool(reducer, initialStore?: Store) { - return createStore(reducer, initialStore, composeEnhancers(applyMiddleware(thunk))); -} +import { composeWithDevTools } from 'redux-devtools-extension'; (async () => { // TODO: to make the store pre-populate with data from the service, @@ -24,7 +18,7 @@ function createStoreWithDevTool(reducer, initialStore?: Store) { filter: 'all' as FilterTypes }; - const store = createStoreWithDevTool(reducer, preloadStore); + const store = createStore(reducer, preloadStore, composeWithDevTools(applyMiddleware(thunk))); initializeIcons();