Просмотр исходного кода

redid redux poc, old branch was to old and caused to many conflicts

Torkel Ödegaard 7 лет назад
Родитель
Сommit
d85fa66fb4

+ 4 - 0
public/app/containers/ServerStats/ServerStats.tsx

@@ -3,6 +3,8 @@ import { hot } from 'react-hot-loader';
 import { inject, observer } from 'mobx-react';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
 import IContainerProps from 'app/containers/IContainerProps';
+import { store } from 'app/store/configureStore';
+import { setNav } from 'app/store/nav/actions';
 
 @inject('nav', 'serverStats')
 @observer
@@ -13,6 +15,8 @@ export class ServerStats extends React.Component<IContainerProps, any> {
 
     nav.load('cfg', 'admin', 'server-stats');
     serverStats.load();
+
+    store.dispatch(setNav('new', { asd: 'tasd' }));
   }
 
   render() {

+ 2 - 0
public/app/core/components/grafana_app.ts

@@ -10,6 +10,7 @@ import { createStore } from 'app/stores/store';
 import colors from 'app/core/utils/colors';
 import { BackendSrv } from 'app/core/services/backend_srv';
 import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { configureStore } from 'app/store/configureStore';
 
 export class GrafanaCtrl {
   /** @ngInject */
@@ -24,6 +25,7 @@ export class GrafanaCtrl {
     backendSrv: BackendSrv,
     datasourceSrv: DatasourceSrv
   ) {
+    configureStore();
     createStore({ backendSrv, datasourceSrv });
 
     $scope.init = function() {

+ 0 - 11
public/app/store/configureStore.dev.ts

@@ -1,11 +0,0 @@
-import { createStore, applyMiddleware, compose } from 'redux';
-import thunk from 'redux-thunk';
-import { createLogger } from 'redux-logger';
-import rootReducer from './reducers';
-
-export let store;
-
-export function configureStore() {
-  const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-  store = createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk, createLogger())));
-}

+ 0 - 9
public/app/store/configureStore.prod.ts

@@ -1,9 +0,0 @@
-import { createStore, applyMiddleware, compose } from 'redux';
-import thunk from 'redux-thunk';
-import rootReducer from './reducers';
-
-export let store;
-
-export function configureStore() {
-  store = createStore(rootReducer, {}, compose(applyMiddleware(thunk)));
-}

+ 14 - 4
public/app/store/configureStore.ts

@@ -1,5 +1,15 @@
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./configureStore.prod');
-} else {
-  module.exports = require('./configureStore.dev');
+import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
+import thunk from 'redux-thunk';
+import { createLogger } from 'redux-logger';
+import { navReducer } from './nav/reducers';
+
+const rootReducer = combineReducers({
+  nav: navReducer,
+});
+
+export let store;
+
+export function configureStore() {
+  const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+  store = createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk, createLogger())));
 }

+ 30 - 0
public/app/store/nav/actions.ts

@@ -0,0 +1,30 @@
+//
+// Only test actions to test redux & typescript
+//
+
+export enum ActionTypes {
+  SET_NAV = 'SET_NAV',
+  SET_QUERY = 'SET_QUERY',
+}
+
+export interface SetNavAction {
+  type: ActionTypes.SET_NAV;
+  payload: {
+    path: string;
+    query: object;
+  };
+}
+
+export interface SetQueryAction {
+  type: ActionTypes.SET_QUERY;
+  payload: {
+    query: object;
+  };
+}
+
+export type Action = SetNavAction | SetQueryAction;
+
+export const setNav = (path: string, query: object): SetNavAction => ({
+  type: ActionTypes.SET_NAV,
+  payload: { path: path, query: query },
+});

+ 0 - 0
public/app/store/nav/nav.ts


+ 30 - 0
public/app/store/nav/reducers.ts

@@ -0,0 +1,30 @@
+import { Action, ActionTypes } from './actions';
+
+export interface NavState {
+  path: string;
+  query: object;
+}
+
+const initialState: NavState = {
+  path: '/test',
+  query: {},
+};
+
+export const navReducer = (state: NavState = initialState, action: Action): NavState => {
+  switch (action.type) {
+    case ActionTypes.SET_NAV: {
+      return { ...state, path: action.payload.path, query: action.payload.query };
+    }
+
+    case ActionTypes.SET_QUERY: {
+      return {
+        ...state,
+        query: action.payload.query,
+      };
+    }
+
+    default: {
+      return state;
+    }
+  }
+};

+ 0 - 23
public/app/store/rootReducer.ts

@@ -1,23 +0,0 @@
-import * as ActionTypes from '../actions';
-import { combineReducers } from 'redux';
-import { nav } from './nav';
-
-// Updates error message to notify about the failed fetches.
-const errorMessage = (state = null, action) => {
-  const { type, error } = action;
-
-  if (type === ActionTypes.RESET_ERROR_MESSAGE) {
-    return null;
-  } else if (error) {
-    return error;
-  }
-
-  return state;
-};
-
-const rootReducer = combineReducers({
-  nav,
-  errorMessage,
-});
-
-export default rootReducer;