feat(app-config): add redux and saga configuration

packages/game-app/package.json

@@ -3,19 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^12.6.0",
-    "@types/jest": "^26.0.19",
-    "@types/node": "^12.19.9",
-    "@types/react": "^16.14.2",
-    "@types/react-dom": "^16.9.10",
-    "env-cmd": "^10.1.0",
+    "@reduxjs/toolkit": "^1.5.0",
     "firebase": "^8.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "4.0.1",
-    "typescript": "^4.1.3",
+    "react-redux": "^7.2.2",
+    "redux-saga": "^1.1.3",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
@@ -50,8 +43,20 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.8.8",
     "@cypress/instrument-cra": "^1.4.0",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.6.0",
+    "@types/jest": "^26.0.19",
+    "@types/node": "^12.19.9",
+    "@types/react": "^16.14.2",
+    "@types/react-dom": "^16.9.10",
+    "@types/react-redux": "^7.1.14",
+    "@types/redux-saga": "^0.10.5",
     "cypress": "^6.2.0",
+    "env-cmd": "^10.1.0",
     "react-app-rewire-alias": "^0.1.9",
-    "react-app-rewired": "^2.1.8"
+    "react-app-rewired": "^2.1.8",
+    "react-scripts": "4.0.1",
+    "typescript": "^4.1.3"
   }
 }

packages/game-app/src/_shared/index.ts

@@ -0,0 +1,31 @@
+import {buildStore} from "./store";
+import firebase from "firebase";
+import CONFIG from "@pipeline/app-config";
+import 'firebase/analytics';
+import 'firebase/auth';
+import 'firebase/firestore';
+import 'firebase/database';
+
+export function bootstrap() {
+
+  firebase.initializeApp({
+    apiKey: CONFIG.REACT_APP_FIREBASE_CONFIG_API_KEY,
+    authDomain: CONFIG.REACT_APP_FIREBASE_CONFIG_AUTH_DOMAIN,
+    databaseURL: CONFIG.REACT_APP_FIREBASE_CONFIG_DATABASE_URL,
+    projectId: CONFIG.REACT_APP_FIREBASE_CONFIG_PROJECT_ID,
+    storageBucket: CONFIG.REACT_APP_FIREBASE_CONFIG_STORAGE_BUCKET,
+    messagingSenderId: CONFIG.REACT_APP_FIREBASE_CONFIG_MESSAGING_SENDER_ID,
+    appId: CONFIG.REACT_APP_FIREBASE_CONFIG_APP_ID,
+  });
+
+  firebase.analytics();
+
+  const store = buildStore();
+
+  store.dispatch({type: 'test'});
+  // For sage test
+  store.dispatch({type: 'ping'});
+
+  return store;
+
+}

packages/game-app/src/_shared/store/buildStore.ts

@@ -0,0 +1,18 @@
+import {configureStore} from '@reduxjs/toolkit';
+import createSagaMiddleware from 'redux-saga';
+import reducers from "./reducers";
+import rootSaga from "./rootSaga";
+
+const sagaMiddleware = createSagaMiddleware();
+
+export default function () {
+  const store = configureStore({
+    reducer: reducers,
+    middleware: [
+      sagaMiddleware
+    ]
+  });
+
+  sagaMiddleware.run(rootSaga)
+  return store;
+}

packages/game-app/src/_shared/store/index.ts

@@ -0,0 +1,7 @@
+
+
+import buildStore from "./buildStore";
+
+export {
+  buildStore
+}

packages/game-app/src/_shared/store/reducers.ts

@@ -0,0 +1,11 @@
+import {Action, ReducersMapObject} from "@reduxjs/toolkit";
+
+function testReducer(state = {}, action: Action) {
+  return state;
+}
+
+const reducers: ReducersMapObject = {
+  test: testReducer
+};
+
+export default reducers;

packages/game-app/src/_shared/store/rootSaga.ts

@@ -0,0 +1,31 @@
+import {Saga} from 'redux-saga';
+import {all, call, put, spawn, takeEvery} from 'redux-saga/effects'
+
+function* testSaga() {
+  yield put({type: 'pong'});
+}
+
+function * testSagaRunner(){
+  yield takeEvery('ping', testSaga);
+}
+
+export default function* rootSaga() {
+  const sagas: Saga[] = [
+    testSagaRunner
+  ];
+
+  yield all(
+    sagas.map(saga =>
+      spawn(function* () {
+        while (true) {
+          try {
+            yield call(saga);
+            break;
+          } catch (e) {
+            console.log(e);
+          }
+        }
+      }),
+    ),
+  );
+}

packages/game-app/src/index.tsx

@@ -4,30 +4,16 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-import firebase from 'firebase/app';
+import {bootstrap} from "./_shared";
+import {Provider} from "react-redux";
 
-import 'firebase/analytics';
-import 'firebase/auth';
-import 'firebase/firestore';
-import 'firebase/database';
-
-import CONFIG from '@pipeline/app-config'
-
-firebase.initializeApp({
-  apiKey: CONFIG.REACT_APP_FIREBASE_CONFIG_API_KEY,
-  authDomain: CONFIG.REACT_APP_FIREBASE_CONFIG_AUTH_DOMAIN,
-  databaseURL: CONFIG.REACT_APP_FIREBASE_CONFIG_DATABASE_URL,
-  projectId: CONFIG.REACT_APP_FIREBASE_CONFIG_PROJECT_ID,
-  storageBucket: CONFIG.REACT_APP_FIREBASE_CONFIG_STORAGE_BUCKET,
-  messagingSenderId: CONFIG.REACT_APP_FIREBASE_CONFIG_MESSAGING_SENDER_ID,
-  appId: CONFIG.REACT_APP_FIREBASE_CONFIG_APP_ID,
-});
-
-firebase.analytics();
+const store = bootstrap();
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App/>
+    </Provider>
   </React.StrictMode>,
   document.getElementById('root')
 );