feature: redux, saga and reactotron working

package.json

@@ -8,23 +8,23 @@
     "date-fns": "^2.0.0-beta.2",
     "date-fns-tz": "^1.0.7",
     "history": "^4.9.0",
-    "immer": "^3.1.3",
+    "immer": "^6.0.2",
     "polished": "^3.5.1",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-icons": "^3.7.0",
     "react-perfect-scrollbar": "^1.5.3",
-    "react-redux": "^7.1.0",
+    "react-redux": "^7.2.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
     "react-toastify": "^5.3.2",
     "reactotron-react-js": "^3.3.2",
-    "reactotron-redux": "^3.1.1",
-    "reactotron-redux-saga": "^4.2.2",
-    "redux": "^4.0.4",
+    "reactotron-redux": "^3.1.2",
+    "reactotron-redux-saga": "^4.2.3",
+    "redux": "^4.0.5",
     "redux-persist": "^5.10.0",
-    "redux-saga": "^1.0.5",
+    "redux-saga": "^1.1.3",
     "styled-components": "^4.3.2",
     "yup": "^0.28.3"
   },

src/App.js

@@ -1,19 +1,24 @@
 import React from 'react';
+import { Provider } from 'react-redux';
 import { Router } from 'react-router-dom';
 
 import './config/ReactotronConfig';
 
 import Routes from './routes';
 import history from './services/history';
 
+import store from './store';
+
 import GlobalStyle from './styles/global';
 
 function App() {
   return (
-    <Router history={history}>
-      <Routes />
-      <GlobalStyle />
-    </Router>
+    <Provider store={store}>
+      <Router history={history}>
+        <Routes />
+        <GlobalStyle />
+      </Router>
+    </Provider>
   );
 }
 

src/config/ReactotronConfig.js

@@ -1,7 +1,12 @@
 import Reactotron from 'reactotron-react-js';
+import { reactotronRedux } from 'reactotron-redux';
+import reactotronSaga from 'reactotron-redux-saga';
 
 if (process.env.NODE_ENV === 'development') {
-  const tron = Reactotron.configure().connect();
+  const tron = Reactotron.configure()
+    .use(reactotronRedux())
+    .use(reactotronSaga())
+    .connect();
 
   tron.clear();
 

src/store/createStore.js

@@ -0,0 +1,10 @@
+import { createStore, compose, applyMiddleware } from 'redux';
+
+export default (reducers, middlewares) => {
+  const enhancer =
+    process.env.NODE_ENV === 'development'
+      ? compose(console.tron.createEnhancer(), applyMiddleware(...middlewares))
+      : applyMiddleware(...middlewares);
+
+  return createStore(reducers, enhancer);
+};

src/store/index.js

@@ -0,0 +1,20 @@
+import createSagaMiddleware from 'redux-saga';
+import createStore from './createStore';
+
+import rootReducer from './modules/rootReducer';
+import rootSaga from './modules/rootSaga';
+
+const sagaMonitor =
+  process.env.NODE_ENV === 'development'
+    ? console.tron.createSagaMonitor()
+    : null;
+
+const sagaMiddleware = createSagaMiddleware({ sagaMonitor });
+
+const middlewares = [sagaMiddleware];
+
+const store = createStore(rootReducer, middlewares);
+
+sagaMiddleware.run(rootSaga);
+
+export default store;

src/store/modules/auth/reducer.js

@@ -0,0 +1,8 @@
+const INITIAL_STATE = {};
+
+export default function auth(state = INITIAL_STATE, action) {
+  switch (action.type) {
+    default:
+      return state;
+  }
+}

src/store/modules/auth/sagas.js

@@ -0,0 +1,3 @@
+import { all } from 'redux-saga/effects';
+
+export default all([]);

src/store/modules/rootReducer.js

@@ -0,0 +1,7 @@
+import { combineReducers } from 'redux';
+
+import auth from './auth/reducer';
+
+export default combineReducers({
+  auth,
+});

src/store/modules/rootSaga.js

@@ -0,0 +1,7 @@
+import { all } from 'redux-saga/effects';
+
+import auth from './auth/sagas';
+
+export default function* rootSaga() {
+  return yield all([auth]);
+}

yarn.lock

@@ -5168,10 +5168,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
   integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==
 
-immer@^3.1.3:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/immer/-/immer-3.3.0.tgz#ee7cf3a248d5dd2d4eedfbe7dfc1e9be8c72041d"
-  integrity sha512-vlWRjnZqoTHuEjadquVHK3GxsXe1gNoATffLEA8Qbrdd++Xb+wHEFiWtwAKTscMBoi1AsvEMXhYRzAXA8Ex9FQ==
+immer@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-6.0.2.tgz#5bc08dc4930c756d0749533a2afbd88c8de0cd19"
+  integrity sha512-56CMvUMZl4kkWJFFUe1TjBgGbyb9ibzpLyHD+RSKSVdytuDXgT/HXO1S+GJVywMVl5neGTdAogoR15eRVEd10Q==
 
 import-cwd@^2.0.0:
   version "2.1.0"
@@ -8538,7 +8538,7 @@ react-perfect-scrollbar@^1.5.3:
     perfect-scrollbar "^1.5.0"
     prop-types "^15.6.1"
 
-react-redux@^7.1.0:
+react-redux@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.0.tgz#f970f62192b3981642fec46fd0db18a074fe879d"
   integrity sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==
@@ -8680,12 +8680,12 @@ reactotron-react-js@^3.3.2:
     reactotron-core-client "2.8.9"
     stacktrace-js "2.0.1"
 
-reactotron-redux-saga@^4.2.2:
+reactotron-redux-saga@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/reactotron-redux-saga/-/reactotron-redux-saga-4.2.3.tgz#13071f792be987f47b89cae8c29a8e7254d8383d"
   integrity sha512-Vo/zjwYyd93nT4h4SJkvhE5WIBk7AnZg5NPM0NF3auwPEz78ZR2xnnyCt2JPYFSvyy6ykNpS7vA7FeREgFkNCQ==
 
-reactotron-redux@^3.1.1:
+reactotron-redux@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/reactotron-redux/-/reactotron-redux-3.1.2.tgz#37301687d4e2a5548664d21fc7447d1171e08ab2"
   integrity sha512-2ScTmE2+kxjKPc7+vsYuw+igkhd4tjoftn4ouugVudQCO7B5vXVyQwLkNv/feaFfFoPlCQSVeJVg7PdzDFOsEQ==
@@ -8774,14 +8774,14 @@ redux-persist@^5.10.0:
   resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-5.10.0.tgz#5d8d802c5571e55924efc1c3a9b23575283be62b"
   integrity sha512-sSJAzNq7zka3qVHKce1hbvqf0Vf5DuTVm7dr4GtsqQVOexnrvbV47RWFiPxQ8fscnyiuWyD2O92DOxPl0tGCRg==
 
-redux-saga@^1.0.5:
+redux-saga@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-1.1.3.tgz#9f3e6aebd3c994bbc0f6901a625f9a42b51d1112"
   integrity sha512-RkSn/z0mwaSa5/xH/hQLo8gNf4tlvT18qXDNvedihLcfzh+jMchDgaariQoehCpgRltEm4zHKJyINEz6aqswTw==
   dependencies:
     "@redux-saga/core" "^1.1.3"
 
-redux@^4.0.4:
+redux@^4.0.4, redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
   integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==