chore(dev): replace Redux configuration with Redux Toolkit (#17)

Author: jonnyn

README.md

@@ -20,7 +20,8 @@ If your app requires authorization, you need to implement login, signup function
 
 #### Redux
 
-Redux can contain global state of the app. This is very useful but on the other hand, it takes time to setup if you are not familiar with it. In the boilerplate, you see [module file](https://github.com/WataruMaeda/react-native-boilerplate/blob/master/src/modules/app.module.js) which contains actions, reducer and store in a file. To connect with actions and state from component, you need to call [connector](https://github.com/WataruMaeda/react-native-boilerplate/blob/master/src/utils/connector.js). You can use actions and state from props. Here is an [example](https://github.com/WataruMaeda/react-native-boilerplate/blob/master/src/routes/Routes.js#L10-L15). To combine reducer, first you can add another module file then import in connector like this [code](https://github.com/WataruMaeda/react-native-boilerplate/blob/master/src/utils/connector.js#L41-L42). Lastly import module in [store](https://github.com/WataruMaeda/react-native-boilerplate/blob/master/src/utils/store.js#L21) as well.
+We are using [Redux Toolkit](https://redux-toolkit.js.org/) to simplify the redux setup and minimize boilerplates. 
+Redux can contain global state of the app. This is very useful but on the other hand, it takes time to setup if you are not familiar with it. In the boilerplate, you see [slices file](https://github.com/WataruMaeda/react-native-boilerplate/blob/master/src/slices/app.slice.js) which contains actions and reducers in a file. Please follow the [quick start tutorials](https://redux-toolkit.js.org/tutorials/quick-start) to see how store is setup; and how to use Redux state and actions in React Components.
 
 #### Assets
 
@@ -39,8 +40,8 @@ It's very important to keep code clean to maintain readability and productivity.
 - [expo](https://github.com/expo/expo)
 - [react-navigation 5.x](https://github.com/react-navigation/react-navigation)
 - [redux](https://github.com/reduxjs/redux)
+- [redux-toolkit](https://redux-toolkit.js.org/)
 - [redux-logger](https://github.com/LogRocket/redux-logger)
-- [redux-thunk](https://github.com/reduxjs/redux-thunk)
 - [moment](https://github.com/moment/moment)
 - [axios](https://github.com/axios/axios)
 - [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)

babel.config.js

@@ -1,5 +1,5 @@
-module.exports = function(api) {
-  api.cache(true);
+module.exports = (api) => {
+  api.cache(true)
   return {
     presets: ['babel-preset-expo'],
     plugins: [
@@ -8,13 +8,13 @@ module.exports = function(api) {
         {
           alias: {
             components: './src/components',
-            scenes: './src/scenes', 
+            scenes: './src/scenes',
             theme: './src/theme',
             utils: './src/utils',
-            modules: './src/modules'
+            slices: './src/slices',
           },
         },
       ],
     ],
-  };
-};
+  }
+}

package.json

@@ -16,6 +16,7 @@
     "@react-navigation/drawer": "^5.11.4",
     "@react-navigation/native": "^5.8.10",
     "@react-navigation/stack": "^5.12.8",
+    "@reduxjs/toolkit": "^1.5.1",
     "axios": "^0.21.1",
     "expo": "^41.0.0",
     "expo-asset": "~8.3.1",
@@ -37,9 +38,7 @@
     "react-native-web": "~0.13.12",
     "react-redux": "^7.1.1",
     "redux": "^4.0.4",
-    "redux-logger": "^3.0.6",
-    "redux-promise-middleware": "^6.1.1",
-    "redux-thunk": "^2.3.0"
+    "redux-logger": "^3.0.6"
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",

src/modules/app.module.js

@@ -1,12 +1,15 @@
 import React, { useEffect } from 'react'
-import PropTypes from 'prop-types'
 import { Text } from 'react-native'
-import Connector from 'utils/connector'
+import { useSelector, useDispatch } from 'react-redux'
+import { authenticate } from 'slices/app.slice'
 import Main from './navigation'
 
-const Routes = ({ actions, checked, loggedIn }) => {
+const Routes = () => {
+  const { checked, loggedIn } = useSelector((state) => state.app)
+  const dispatch = useDispatch()
+
   useEffect(() => {
-    actions.authenticate()
+    dispatch(authenticate({ loggedIn: true, checked: true }))
   }, [])
 
   // TODO: switch router by loggedIn state
@@ -17,26 +20,4 @@ const Routes = ({ actions, checked, loggedIn }) => {
   return <Main />
 }
 
-Routes.propTypes = {
-  actions: PropTypes.shape({
-    authenticate: PropTypes.func,
-  }),
-  checked: PropTypes.bool,
-  loggedIn: PropTypes.bool,
-}
-
-Routes.defaultProps = {
-  actions: {
-    authenticate: () => null,
-  },
-  checked: false,
-  loggedIn: false,
-}
-
-export default (props) => (
-  <Connector>
-    {({ actions, state: { app } }) => (
-      <Routes actions={actions.app} {...app} {...props} />
-    )}
-  </Connector>
-)
+export default Routes

src/routes/Routes.js

@@ -0,0 +1,35 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit'
+
+// ------------------------------------
+// Constants
+// ------------------------------------
+
+const initialState = {
+  checked: false,
+  loggedIn: false,
+  me: {},
+}
+
+// ------------------------------------
+// Slice
+// ------------------------------------
+
+const appSlice = createSlice({
+  name: 'app',
+  initialState,
+  reducers: {
+    authenticate: (state, { payload }) => {
+      state.loggedIn = payload.loggedIn
+      state.checked = payload.checked
+    },
+    saveMe: (state, { payload }) => {
+      state.me = payload.me
+    },
+  },
+})
+
+export const { action } = appSlice
+export const { authenticate, saveMe } = appSlice.actions
+
+export default appSlice.reducer

src/slices/app.slice.js

@@ -1,38 +1,25 @@
 import {
-  createStore, applyMiddleware, compose, combineReducers,
-} from 'redux'
-import thunk from 'redux-thunk'
+  configureStore,
+  combineReducers,
+  getDefaultMiddleware,
+} from '@reduxjs/toolkit'
 import logger from 'redux-logger'
-import app from 'modules/app.module'
+import appReducer from 'slices/app.slice'
 
-const analytics = () => (next) => (action) => {
-  window.dataLayer = window.dataLayer || []
-  window.dataLayer.push({
-    event: action.type,
-    payload: action.payload,
-  })
+const rootReducer = combineReducers({
+  app: appReducer,
+  // add more reducers
+})
 
-  return next(action)
-}
+const defaultMiddleware = getDefaultMiddleware({
+  serializableCheck: false,
+  immutableCheck: false,
+})
 
-// Redux store config
-const configureStore = (initialState = {}) => {
-  const reducers = combineReducers({
-    app,
-  })
-
-  // Middleware and store enhancers
-  const middlewares = [
-    thunk,
-    process.env.NODE_ENV !== 'production' && logger,
-    analytics,
-  ].filter(Boolean)
-  const enhancer = compose(applyMiddleware(...middlewares))
-  const store = createStore(reducers, initialState, enhancer)
-
-  return store
-}
-
-const store = configureStore()
+const store = configureStore({
+  reducer: rootReducer,
+  // eslint-disable-next-line no-undef
+  middleware: __DEV__ ? defaultMiddleware.concat(logger) : defaultMiddleware,
+})
 
 export default store

src/utils/connector.js

@@ -1696,6 +1696,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.9.2":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
+  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.0.0", "@babel/template@^7.10.4", "@babel/template@^7.3.3", "@babel/template@^7.8.6":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
@@ -3537,6 +3544,16 @@
     color "^3.1.3"
     react-native-iphone-x-helper "^1.3.0"
 
+"@reduxjs/toolkit@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.5.1.tgz#05daa2f6eebc70dc18cd98a90421fab7fa565dc5"
+  integrity sha512-PngZKuwVZsd+mimnmhiOQzoD0FiMjqVks6ituO1//Ft5UEX5Ca9of13NEjo//pU22Jk7z/mdXVsmDfgsig1osA==
+  dependencies:
+    immer "^8.0.1"
+    redux "^4.0.0"
+    redux-thunk "^2.3.0"
+    reselect "^4.0.0"
+
 "@segment/loosely-validate-event@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz#87dfc979e5b4e7b82c5f1d8b722dfd5d77644681"
@@ -9329,6 +9346,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
   integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==
 
+immer@^8.0.1:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.4.tgz#3a21605a4e2dded852fb2afd208ad50969737b7a"
+  integrity sha512-jMfL18P+/6P6epANRvRk6q8t+3gGhqsJ9EuJ25AXE+9bNTYtssvzeYbEd0mXRYWCmmXSIbnlpz6vd6iJlmGGGQ==
+
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
@@ -14335,16 +14357,18 @@ redux-logger@^3.0.6:
   dependencies:
     deep-diff "^0.3.5"
 
-redux-promise-middleware@^6.1.1:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/redux-promise-middleware/-/redux-promise-middleware-6.1.2.tgz#1c14222686934be243cbb292e348ef7d5b20d6d2"
-  integrity sha512-ZqZu/nnSzGgwTtNbGoGVontpk7LjTOv0kigtt3CcgXI9gpq+8WlfXTXRZD0WTD5yaohRq0q2nYmJXSTjwXs83Q==
-
 redux-thunk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
   integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
 
+redux@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.0.tgz#eb049679f2f523c379f1aff345c8612f294c88d4"
+  integrity sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 redux@^4.0.4:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"