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-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",

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

@@ -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());

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

@@ -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());

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

@@ -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'));

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

@@ -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'));

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

@@ -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'));

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

@@ -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'));

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

@@ -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();

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

@@ -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();