Refactor store

- migrate actions and reducers to slices
- update exports
- update dynamic-middlewares

src/Root.tsx

@@ -12,7 +12,7 @@ import { name } from '~/config';
 import { useAppSelector } from '~/modules/hooks';
 import theme, { headerHeight } from '~/modules/theme';
 
-import { showAlert } from '~/actions';
+import { alertShow } from '~/actions';
 
 import Footer from '~/components/Footer';
 import Header from '~/components/Header';
@@ -49,7 +49,7 @@ function Root() {
 
   useEffect(() => {
     if (changed('isAuthenticated', true)) {
-      dispatch(showAlert('Hello! And welcome!', { type: 'success', icon: 'bell', timeout: 10 }));
+      dispatch(alertShow('Hello! And welcome!', { type: 'success', icon: 'bell', timeout: 10 }));
     }
   }, [dispatch, changed]);
 

src/containers/GitHub.tsx

@@ -21,7 +21,7 @@ import { topic } from '~/config';
 import { useAppSelector } from '~/modules/hooks';
 import theme, { appColor } from '~/modules/theme';
 
-import { getRepos, setAppOptions, showAlert } from '~/actions';
+import { alertShow, getRepos, setAppOptions } from '~/actions';
 import { STATUS } from '~/literals';
 
 import { selectApp, selectGitHub } from '~/selectors';
@@ -103,7 +103,7 @@ function GitHub() {
 
   useUpdateEffect(() => {
     if (changed('status', STATUS.ERROR)) {
-      dispatch(showAlert(message, { type: 'error' }));
+      dispatch(alertShow(message, { type: 'error' }));
     }
   }, [changed, dispatch, message]);
 

src/containers/SystemAlerts.tsx

@@ -7,7 +7,7 @@ import { responsive } from '@gilbarbara/components';
 import { useAppSelector } from '~/modules/hooks';
 import theme from '~/modules/theme';
 
-import { hideAlert } from '~/actions';
+import { alertHide } from '~/actions';
 
 import Alert from '~/components/Alert';
 import Transition from '~/components/Transition';
@@ -97,7 +97,7 @@ export default function SystemAlerts() {
       alerts.forEach(d => {
         if (d.timeout && !current[d.id]) {
           current[d.id] = setTimeout(() => {
-            dispatch(hideAlert(d.id));
+            dispatch(alertHide(d.id));
           }, d.timeout * 1000);
         }
       });
@@ -117,7 +117,7 @@ export default function SystemAlerts() {
       event.preventDefault();
       const { id = '' } = event.currentTarget.dataset;
 
-      dispatch(hideAlert(id));
+      dispatch(alertHide(id));
     },
     [dispatch],
   );

src/literals/index.ts

@@ -1,22 +1,5 @@
-import { keyMirror } from '@gilbarbara/helpers';
-
 import { Status } from '~/types';
 
-export const ActionTypes = keyMirror({
-  ALERTS_HIDE: undefined,
-  ALERTS_SHOW: undefined,
-  GITHUB_GET_REPOS_REQUEST: undefined,
-  GITHUB_GET_REPOS_SUCCESS: undefined,
-  GITHUB_GET_REPOS_FAILURE: undefined,
-  SET_APP_OPTIONS: undefined,
-  USER_LOGIN_REQUEST: undefined,
-  USER_LOGIN_SUCCESS: undefined,
-  USER_LOGIN_FAILURE: undefined,
-  USER_LOGOUT_REQUEST: undefined,
-  USER_LOGOUT_SUCCESS: undefined,
-  USER_LOGOUT_FAILURE: undefined,
-});
-
 export const STATUS: Status = {
   IDLE: 'idle',
   RUNNING: 'running',

src/main.tsx

@@ -38,5 +38,6 @@ if (container) {
 
 /* c8 ignore next 3 */
 if (['local', 'development'].includes(APP_ENV)) {
+  // eslint-disable-next-line no-console
   reportWebVitals(console.log);
 }

src/modules/helpers.ts

@@ -2,9 +2,15 @@ import { now } from '@gilbarbara/helpers';
 import { createAction } from '@reduxjs/toolkit';
 import { REHYDRATE } from 'redux-persist';
 
-import { RootState } from '~/types';
+import { PlainObject, RootState } from '~/types';
 
-export function actionPayload<T = any, M = Record<string, string>>(payload: T, meta?: M) {
+export function actionBody<T = any, M extends PlainObject = PlainObject>(
+  payload: T,
+  meta: M,
+): { meta: M; payload: T };
+export function actionBody<T = any>(payload: T): { meta: never; payload: T };
+
+export function actionBody<T = any>(payload: T, meta?: any) {
   return { payload, meta };
 }
 

src/sagas/github.ts

@@ -4,7 +4,6 @@ import { all, call, put, select, takeLatest } from 'redux-saga/effects';
 import { hasValidCache } from '~/modules/helpers';
 
 import { getRepos, getReposFailure, getReposSuccess } from '~/actions';
-import { ActionTypes } from '~/literals';
 
 import { RootState } from '~/types';
 
@@ -41,5 +40,5 @@ export function* getReposSaga({ payload }: ReturnType<typeof getRepos>) {
  * GitHub Sagas
  */
 export default function* root() {
-  yield all([takeLatest(ActionTypes.GITHUB_GET_REPOS_REQUEST, getReposSaga)]);
+  yield all([takeLatest(getRepos.type, getReposSaga)]);
 }

src/sagas/user.ts

@@ -1,7 +1,6 @@
 import { all, delay, put, takeLatest } from 'redux-saga/effects';
 
-import { loginSuccess, logOutSuccess } from '~/actions';
-import { ActionTypes } from '~/literals';
+import { login, loginSuccess, logOut, logOutSuccess } from '~/actions';
 
 export function* loginSaga() {
   yield delay(400);
@@ -16,8 +15,5 @@ export function* logoutSaga() {
 }
 
 export default function* root() {
-  yield all([
-    takeLatest(ActionTypes.USER_LOGIN_REQUEST, loginSaga),
-    takeLatest(ActionTypes.USER_LOGOUT_REQUEST, logoutSaga),
-  ]);
+  yield all([takeLatest(login.type, loginSaga), takeLatest(logOut.type, logoutSaga)]);
 }

src/store/actions.ts

@@ -0,0 +1,4 @@
+export { alertHide, alertShow } from './slices/alerts';
+export { setAppOptions } from './slices/app';
+export { getRepos, getReposFailure, getReposSuccess } from './slices/github';
+export { login, loginSuccess, logOut, logOutSuccess } from './slices/user';