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

This commit is contained in:
Torkel Ödegaard 2018-07-09 10:28:20 +02:00
parent 3740d56491
commit d85fa66fb4
9 changed files with 80 additions and 47 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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 },
});

View File

@ -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;
}
}
};

View File

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