[add] action store reducer

actions/index.ts

@@ -0,0 +1,7 @@
+import * as types from '../constants/actionTypes';
+
+export const switchNavbar = (state: string) => ({ type: types.SWITCH_NAVBAR, payload: { state }});
+
+export const switchSidebar = (state: string) => ({ type: types.SWITCH_SIDEBAR, payload: { state }});
+
+export default {};

config/configureStore.js

@@ -1,32 +0,0 @@
-import { createStore, applyMiddleware } from 'redux';
-import createSagaMiddleware from 'redux-saga';
-import { composeWithDevTools } from 'redux-devtools-extension';
-
-import rootReducer from '../redux/reducers';
-import rootSaga from '../redux/sagas';
-
-const sagaMiddleware = createSagaMiddleware();
-
-const bindMiddleware = (middleware) => {
-  if (process.env.NODE_ENV !== 'production') {
-    return composeWithDevTools(applyMiddleware(...middleware));
-  }
-  return applyMiddleware(...middleware);
-};
-
-const configureStore = (initialState = {}) => {
-  const store = createStore(
-    rootReducer,
-    initialState,
-    bindMiddleware([sagaMiddleware]),
-  );
-
-  store.runSagaTask = () => {
-    store.sagaTask = sagaMiddleware.run(rootSaga);
-  };
-
-  store.runSagaTask();
-  return store;
-};
-
-export default configureStore;

constants/actionTypes.js

@@ -1,7 +0,0 @@
-export const ReduxActionTypes = {
-  FETCH_DATA: 'FETCH_DATA',
-  FETCH_DATA_SUC: 'FETCH_DATA_SUC',
-  FETCH_DATA_FAL: 'FETCH_DATA_FAL',
-};
-
-export default ReduxActionTypes;

constants/actionTypes.ts

@@ -0,0 +1,2 @@
+export const SWITCH_NAVBAR = 'SWITCH_NAVBAR';
+export const SWITCH_SIDEBAR = 'SWITCH_SIDEBAR';

reducers/index.ts

@@ -0,0 +1,15 @@
+import * as actions from './main';
+import * as types from '../constants/actionTypes';
+
+const createReducer = (handlers: {[key: string]: any}) => (state: Object, action: { type: string }) => {
+  if(!handlers.hasOwnProperty(action.type)) {
+    return state;
+  }
+
+  return handlers[action.type](state, action);
+};
+
+export default createReducer({
+  [types.SWITCH_NAVBAR]: actions.navbarState,
+  [types.SWITCH_SIDEBAR]: actions.sidebarState,
+});

reducers/main.ts

@@ -0,0 +1,13 @@
+type Payload = {
+  payload: any;
+};
+
+export const navbarState = (state: Object, { payload }: Payload) => ({
+  ...state,
+  navbarState: payload.state,
+});
+
+export const sidebarState = (state: Object, { payload }: Payload) => ({
+  ...state,
+  sidebarState: payload.state,
+});

store/index.tsx

@@ -0,0 +1,27 @@
+import React, { createContext, useContext, useReducer, Reducer } from 'react';
+
+import { StateType } from '../store/initialState';
+
+type IContextProps = [
+  StateType,
+  ({type}:{type:string}) => void,
+]
+
+export const StateContext = createContext({} as IContextProps);
+
+export const StoreProvider = ({
+  reducer,
+  initialState,
+  children,
+}: {
+  reducer: Reducer<any, any>;
+  initialState: StateType;
+  children: React.ReactNode;
+}) => (
+  <StateContext.Provider
+    value={useReducer(reducer, initialState)}
+    children={children}
+  />
+);
+
+export const useStore = () => useContext(StateContext);

store/initialState.ts

@@ -0,0 +1,9 @@
+export type StateType = {
+  navbarState: 'search' | 'annotations' | 'thumbnails' | '';
+  sidebarState: 'markup-tools' | 'create-form' | 'watermark' | '';
+};
+
+export default {
+  navbarState: '',
+  sidebarState: '',
+};