microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

making this cleaner with composeWithDevTool

Browse Source
This commit is contained in:
Ken
2019-02-24 14:16:30 -08:00
parent c310f3a8b1
commit 1e609dd408
9 changed files with 34 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -56,6 +56,7 @@
"react": "^16.7.0", "react": "^16.7.0",
"react-dom": "^16.7.0", "react-dom": "^16.7.0",
"react-redux": "^6.0.0", "react-redux": "^6.0.0",
"redux-devtools-extension": "^2.13.8",
"redux": "^4.0.1", "redux": "^4.0.1",
"redux-starter-kit": "^0.4.3", "redux-starter-kit": "^0.4.3",
"redux-thunk": "^2.3.0", "redux-thunk": "^2.3.0",

12
step2-06/demo/src/index.tsx
View File

@@ -1,15 +1,9 @@
import { reducer } from './reducers'; import { reducer } from './reducers';
import { createStore, compose } from 'redux'; import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { actions } from './actions'; import { actions } from './actions';
/* Goop for making the Redux dev tool to work */ const store = createStore(reducer, {}, composeWithDevTools());
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, {});
console.log(store.getState()); console.log(store.getState());

21
step2-06/exercise/src/index.tsx
View File

@@ -1,19 +1,18 @@
import { reducer } from './reducers'; import { reducer } from './reducers';
import { createStore, compose } from 'redux'; import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { actions } from './actions'; import { actions } from './actions';
/* Goop for making the Redux dev tool to work */ const store = createStore(reducer, {}, composeWithDevTools());
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, {});
console.log(store.getState()); 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()); console.log(store.getState());

12
step2-07/demo/src/index.tsx
View File

@@ -1,20 +1,14 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { reducer } from './reducers'; import { reducer } from './reducers';
import { createStore, compose } from 'redux'; import { createStore } from 'redux';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { TodoApp } from './components/TodoApp'; import { TodoApp } from './components/TodoApp';
import { actions } from './actions'; import { actions } from './actions';
import { initializeIcons } from '@uifabric/icons'; import { initializeIcons } from '@uifabric/icons';
import { composeWithDevTools } from 'redux-devtools-extension';
/* Goop for making the Redux dev tool to work */ const store = createStore(reducer, {}, composeWithDevTools());
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, {});
store.dispatch(actions.addTodo('hello')); store.dispatch(actions.addTodo('hello'));
store.dispatch(actions.addTodo('world')); store.dispatch(actions.addTodo('world'));

12
step2-07/exercise/src/index.tsx
View File

@@ -1,20 +1,14 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { reducer } from './reducers'; import { reducer } from './reducers';
import { createStore, compose } from 'redux'; import { createStore } from 'redux';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { TodoApp } from './components/TodoApp'; import { TodoApp } from './components/TodoApp';
import { actions } from './actions'; import { actions } from './actions';
import { initializeIcons } from '@uifabric/icons'; import { initializeIcons } from '@uifabric/icons';
import { composeWithDevTools } from 'redux-devtools-extension';
/* Goop for making the Redux dev tool to work */ const store = createStore(reducer, {}, composeWithDevTools());
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, {});
store.dispatch(actions.addTodo('hello')); store.dispatch(actions.addTodo('hello'));
store.dispatch(actions.addTodo('world')); store.dispatch(actions.addTodo('world'));

13
step2-08/demo/src/index.tsx
View File

@@ -1,21 +1,14 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { reducer } from './reducers'; import { reducer } from './reducers';
import { createStore, compose } from 'redux'; import { createStore } from 'redux';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { TodoApp } from './components/TodoApp'; import { TodoApp } from './components/TodoApp';
import { actions } from './actions'; import { actions } from './actions';
import { initializeIcons } from '@uifabric/icons'; import { initializeIcons } from '@uifabric/icons';
import { Store } from './store'; import { composeWithDevTools } from 'redux-devtools-extension';
/* Goop for making the Redux dev tool to work */ const store = createStore(reducer, {}, composeWithDevTools());
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);
store.dispatch(actions.addTodo('hello')); store.dispatch(actions.addTodo('hello'));
store.dispatch(actions.addTodo('world')); store.dispatch(actions.addTodo('world'));

13
step2-08/exercise/src/index.tsx
View File

@@ -1,21 +1,14 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { reducer } from './reducers'; import { reducer } from './reducers';
import { createStore, compose } from 'redux'; import { createStore } from 'redux';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { TodoApp } from './components/TodoApp'; import { TodoApp } from './components/TodoApp';
import { actions } from './actions'; import { actions } from './actions';
import { initializeIcons } from '@uifabric/icons'; import { initializeIcons } from '@uifabric/icons';
import { Store } from './store'; import { composeWithDevTools } from 'redux-devtools-extension';
/* Goop for making the Redux dev tool to work */ const store = createStore(reducer, {}, composeWithDevTools());
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);
store.dispatch(actions.addTodo('hello')); store.dispatch(actions.addTodo('hello'));
store.dispatch(actions.addTodo('world')); store.dispatch(actions.addTodo('world'));

14
step2-09/demo/src/index.tsx
View File

@@ -1,20 +1,14 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { reducer } from './reducers'; import { reducer } from './reducers';
import { applyMiddleware, createStore, compose } from 'redux'; import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk'; import thunk from 'redux-thunk';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { TodoApp } from './components/TodoApp'; import { TodoApp } from './components/TodoApp';
import { initializeIcons } from '@uifabric/icons'; import { initializeIcons } from '@uifabric/icons';
import { Store, FilterTypes } from './store'; import { FilterTypes } from './store';
import * as service from './service'; import * as service from './service';
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(applyMiddleware(thunk)));
}
(async () => { (async () => {
const preloadStore = { const preloadStore = {
@@ -22,7 +16,7 @@ function createStoreWithDevTool(reducer, initialStore?: Store) {
filter: 'all' as FilterTypes filter: 'all' as FilterTypes
}; };
const store = createStoreWithDevTool(reducer, preloadStore); const store = createStore(reducer, preloadStore, composeWithDevTools(applyMiddleware(thunk)));
initializeIcons(); initializeIcons();

14
step2-09/exercise/src/index.tsx
View File

@@ -1,20 +1,14 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { reducer } from './reducers'; import { reducer } from './reducers';
import { applyMiddleware, createStore, compose } from 'redux'; import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk'; import thunk from 'redux-thunk';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { TodoApp } from './components/TodoApp'; import { TodoApp } from './components/TodoApp';
import { initializeIcons } from '@uifabric/icons'; import { initializeIcons } from '@uifabric/icons';
import { Store, FilterTypes } from './store'; import { FilterTypes } from './store';
import * as service from './service'; import * as service from './service';
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(applyMiddleware(thunk)));
}
(async () => { (async () => {
// TODO: to make the store pre-populate with data from the service, // 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 filter: 'all' as FilterTypes
}; };
const store = createStoreWithDevTool(reducer, preloadStore); const store = createStore(reducer, preloadStore, composeWithDevTools(applyMiddleware(thunk)));
initializeIcons(); initializeIcons();