Add a basic redux store.
Tom Hacohen
7 years ago
parent
55f595d52a
commit
94c6916447
@ -1,11 +1,19 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import * as ReactDOM from 'react-dom';
|
import * as ReactDOM from 'react-dom';
|
||||||
|
import { Provider } from 'react-redux';
|
||||||
|
import { PersistGate } from 'redux-persist/es/integration/react';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
import registerServiceWorker from './registerServiceWorker';
|
import registerServiceWorker from './registerServiceWorker';
|
||||||
import './index.css';
|
import './index.css';
|
||||||
|
|
||||||
|
import { store, persistor } from './store';
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<App />,
|
<Provider store={store}>
|
||||||
|
<PersistGate persistor={persistor}>
|
||||||
|
<App />
|
||||||
|
</PersistGate>
|
||||||
|
</Provider>,
|
||||||
document.getElementById('root') as HTMLElement
|
document.getElementById('root') as HTMLElement
|
||||||
);
|
);
|
||||||
registerServiceWorker();
|
registerServiceWorker();
|
||||||
|
|||||||
@ -0,0 +1,3 @@
|
|||||||
|
declare module 'redux-persist';
|
||||||
|
declare module 'redux-persist/lib/storage/session';
|
||||||
|
declare module 'redux-persist/es/integration/react';
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
import { createStore, combineReducers, applyMiddleware } from 'redux';
|
||||||
|
import { persistReducer, persistStore } from 'redux-persist';
|
||||||
|
import session from 'redux-persist/lib/storage/session';
|
||||||
|
import thunkMiddleware from 'redux-thunk';
|
||||||
|
import { createLogger } from 'redux-logger';
|
||||||
|
|
||||||
|
import * as EteSync from './api/EteSync';
|
||||||
|
|
||||||
|
const loggerMiddleware = createLogger();
|
||||||
|
|
||||||
|
enum Actions {
|
||||||
|
FETCH_CREDENTIALS = 'FETCH_CREDENTIALS',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum FetchStatus {
|
||||||
|
Initial = 'INITIAL',
|
||||||
|
Request = 'REQUEST',
|
||||||
|
Failure = 'FAILURE',
|
||||||
|
Success = 'SUCCESS',
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CredentialsData {
|
||||||
|
serviceApiUrl: string;
|
||||||
|
credentials: EteSync.Credentials;
|
||||||
|
encryptionKey: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CredentialsType {
|
||||||
|
status: FetchStatus;
|
||||||
|
error?: Error;
|
||||||
|
credentials?: CredentialsData;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface StoreState {
|
||||||
|
fetchCount: number;
|
||||||
|
credentials: CredentialsData;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function credentialsSuccess(creds: CredentialsData) {
|
||||||
|
return {
|
||||||
|
type: Actions.FETCH_CREDENTIALS,
|
||||||
|
status: FetchStatus.Success,
|
||||||
|
credentials: creds,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function credentialsRequest() {
|
||||||
|
return {
|
||||||
|
type: Actions.FETCH_CREDENTIALS,
|
||||||
|
status: FetchStatus.Request,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function credentialsFailure(error: Error) {
|
||||||
|
return {
|
||||||
|
type: Actions.FETCH_CREDENTIALS,
|
||||||
|
status: FetchStatus.Failure,
|
||||||
|
error
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function credentials(state: CredentialsType = {status: FetchStatus.Initial}, action: any) {
|
||||||
|
switch (action.type) {
|
||||||
|
case Actions.FETCH_CREDENTIALS:
|
||||||
|
if (action.status === FetchStatus.Success) {
|
||||||
|
return {
|
||||||
|
status: action.status,
|
||||||
|
credentials: action.credentials,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
status: action.status,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function fetchCount(state: number = 0, action: any) {
|
||||||
|
// FIXME: Make it automatic by action properties.
|
||||||
|
switch (action.type) {
|
||||||
|
case Actions.FETCH_CREDENTIALS:
|
||||||
|
if (action.status === FetchStatus.Request) {
|
||||||
|
return state + 1;
|
||||||
|
} else {
|
||||||
|
return state - 1;
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const credentialsPersistConfig = {
|
||||||
|
key: 'credentials',
|
||||||
|
storage: session,
|
||||||
|
whitelist: ['credentials'],
|
||||||
|
};
|
||||||
|
|
||||||
|
const reducers = combineReducers({
|
||||||
|
fetchCount,
|
||||||
|
credentials: persistReducer(credentialsPersistConfig, credentials),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const store = createStore(
|
||||||
|
reducers,
|
||||||
|
applyMiddleware(
|
||||||
|
thunkMiddleware,
|
||||||
|
loggerMiddleware
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
export const persistor = persistStore(store);
|
||||||
Loading…
Reference in New Issue