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 ReactDOM from 'react-dom';
|
||||
import { Provider } from 'react-redux';
|
||||
import { PersistGate } from 'redux-persist/es/integration/react';
|
||||
import App from './App';
|
||||
import registerServiceWorker from './registerServiceWorker';
|
||||
import './index.css';
|
||||
|
||||
import { store, persistor } from './store';
|
||||
|
||||
ReactDOM.render(
|
||||
<App />,
|
||||
<Provider store={store}>
|
||||
<PersistGate persistor={persistor}>
|
||||
<App />
|
||||
</PersistGate>
|
||||
</Provider>,
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
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