Use Redux Toolkit (#32)

* Initial commit

* Update ionic template subsection

* Simplify slicePath

* Remove unnecessary toString

MIGRATION.md

@@ -5,3 +5,5 @@ Version 7 of the lp-subsection-generator introduced the following changes that m
 1. Version 7 of the lp-subsection-generator requires that a Node version >= Node 12 be installed.
 1. The lp-subsection-generator argument `subsection-name` is now required. Previously, this argument was optional and would default to `sub-section`.
 
+## Migration to Version ^8.0.0
+Version 8 requires `@reduxjs/toolkit`, which is now standard across LPL's client templates.

ionic-template/index.js

@@ -1,2 +1,2 @@
 export { default as Routes } from './Routes'
-export { reducer, reducerKey } from './reducer'
+export { default as reducer, name as reducerKey } from './slice'

ionic-template/slice.js

@@ -0,0 +1,39 @@
+import { createSlice } from '@reduxjs/toolkit'
+// import { selectorForSlice } from 'lp-redux-utils'
+// import * as apiActions from 'api-actions'
+// import { handleSuccess } from 'lp-redux-api'
+
+export const name = '%subsection%'
+const initialState = {}
+
+const slice = createSlice({
+  name,
+  initialState,
+  reducers: {
+    // clear%SubSection% () {
+    //   state.%subSection% = null
+    // }
+  },
+  extraReducers: (/* builder */) => {
+    // builder.addCase(
+    //   apiActions.fetch%SubSections%,
+    //   handleSuccess((state, action) => {
+    //     state.%subSections% = action.payload.data
+    //   })
+    // )
+    // builder.addCase(
+    //   apiActions.fetch%SubSection%,
+    //   handleSuccess((state, action) => {
+    //     state.%subSection% = action.payload.data
+    //   })
+    // )
+  },
+})
+
+// const select = selectorForSlice(`root.${name}`)
+export const selectors = {
+  // %subSections%: select('%subSections%'),
+  // %subSection%: select('%subSection%'),
+}
+// export const { clear%SubSection% } = slice.actions
+export default slice.reducer

ionic-template/views/SubSectionShow.js

@@ -1,46 +1,35 @@
 import React /*, { useEffect } */ from 'react'
 // import PropTypes from 'prop-types'
-import { compose } from 'redux'
-import { connect } from 'react-redux'
+// import * as Types from 'types'
+// import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react'
 // import { LoadingModal } from 'components'
-// import { selectors } from '../reducer'
-// import * as actions from '../actions'
+// import { clear%SubSection%, selectors } from '../reducer'
 // import * as apiActions from 'api-actions'
-// import * as Types from 'types'
 
-const propTypes = {
-  // %subSection%: Types.%SubSection%,
-  // fetch%SubSection%: PropTypes.func.isRequired,
-  // clear%SubSection%: PropTypes.func.isRequired,
-}
+const propTypes = {}
 const defaultProps = {}
 
-function %SubSection%Show (
-  // {
-  //   %subSection%,
-  //   fetch%SubSection%,
-  //   clear%SubSection%,
-  // }
-) {
-  const { id } = useParams()
-  //
+function %SubSection%Show () {
+  // const { id } = useParams()
+  // const %subSection% = useSelector(selectors.%subSection%)
+  // const dispatch = useDispatch()
   // useEffect(() => {
-  //  fetch%SubSection%(id)
+  //  dispatch(apiActions.fetch%SubSection%(id))
   //  // Cleanup
-  //  return () => clear%SubSection%()
-  // }, [ id ])
+  //  return () => dispatch(clear%SubSection%())
+  // }, [dispatch, id])
   //
   // if (!%subSection%) return <LoadingModal />
   //
   return (
     <IonList>
-      <IonListHeader>%SubSections% Show View</IonListHeader>
+      <IonListHeader>%SubSection% Show View</IonListHeader>
       <IonItem>
         <IonLabel className="ion-text-wrap">
           <p>
-            This is the %SubSections% show view for id: [{id}].
+            This is the %SubSection% show view for id: [{id}].
           </p>
         </IonLabel>
       </IonItem>
@@ -63,17 +52,4 @@ function %SubSection%Show (
 %SubSection%Show.propTypes = propTypes
 %SubSection%Show.defaultProps = defaultProps
 
-function mapStateToProps (/* state */) {
-  return {
-    // %subSection%: selectors.%subSection%(state)
-  }
-}
-
-const mapDispatchToProps = {
-  // fetch%SubSection%: apiActions.fetch%SubSection%,
-  // clear%SubSection%: actions.clear%SubSection%
-}
-
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-)(%SubSection%Show)
+export default %SubSection%Show

ionic-template/views/SubSections.js

@@ -1,27 +1,21 @@
 import React /*, { useEffect } */ from 'react'
 // import PropTypes from 'prop-types'
 // import * as Types from 'types'
-import { compose } from 'redux'
-import { connect } from 'react-redux'
+// import { useDispatch, useSelector } from 'react-redux'
 import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react'
 // import { LoadingModal } from 'components'
-// import { selectors } from '../reducer'
-// import * as actions from '../actions'
+// import { selectors } from '../slice'
 // import * as apiActions from 'api-actions'
 
-const propTypes = {
-  // %subSections%: PropTypes.arrayOf(Types.%SubSection%),
-  // fetch%SubSections%: PropTypes.func.isRequired,
-}
+const propTypes = {}
 const defaultProps = {}
 
-function %SubSections% (
-  // {
-  //   %subSections%,
-  //   fetch%SubSections%,
-  // }
-) {
-  // useEffect(() => { fetch%SubSections%() }, [])
+function %SubSections% () {
+  // const %subSections% = useSelector(selectors.%subSections%)
+  // const dispatch = useDispatch()
+  // useEffect(() => {
+  //  dispatch(apiActions.fetch%SubSections%())
+  // }, [dispatch])
   //
   // if (!%subSections%) return <LoadingModal />
   //
@@ -54,16 +48,4 @@ function %SubSections% (
 %SubSections%.propTypes = propTypes
 %SubSections%.defaultProps = defaultProps
 
-function mapStateToProps (/* state */) {
-  return {
-    // %subSections%: selectors.%subSections%(state),
-  }
-}
-
-const mapDispatchToProps = {
-  // fetch%SubSections%: apiActions.fetch%SubSections%,
-}
-
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-)(%SubSections%)
+export default %SubSections%

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-subsection-generator",
-  "version": "7.2.1",
+  "version": "8.0.0",
   "description": "",
   "main": "index.js",
   "engines": {
@@ -29,6 +29,7 @@
     "eslint": "^7.32.0"
   },
   "peerDependencies": {
+    "@reduxjs/toolkit": "^1.9.5",
     "react": ">= 16",
     "react-redux": "^7.2.8 || ^8.0.0",
     "react-router-dom": "^4.0.0 || ^5.0.0",

template/index.js

@@ -1,2 +1,2 @@
 export { default as Routes } from './Routes'
-export { reducer, reducerKey } from './reducer'
+export { default as reducer, name as reducerKey } from './slice'

template/slice.js

@@ -0,0 +1,39 @@
+import { createSlice } from '@reduxjs/toolkit'
+// import { selectorForSlice } from 'lp-redux-utils'
+// import * as apiActions from 'api-actions'
+// import { handleSuccess } from 'lp-redux-api'
+
+export const name = '%subsection%'
+const initialState = {}
+
+const slice = createSlice({
+  name,
+  initialState,
+  reducers: {
+    // clear%SubSection% () {
+    //   state.%subSection% = null
+    // }
+  },
+  extraReducers: (/* builder */) => {
+    // builder.addCase(
+    //   apiActions.fetch%SubSections%,
+    //   handleSuccess((state, action) => {
+    //     state.%subSections% = action.payload.data
+    //   })
+    // )
+    // builder.addCase(
+    //   apiActions.fetch%SubSection%,
+    //   handleSuccess((state, action) => {
+    //     state.%subSection% = action.payload.data
+    //   })
+    // )
+  },
+})
+
+// const select = selectorForSlice(`root.${name}`)
+export const selectors = {
+  // %subSections%: select('%subSections%'),
+  // %subSection%: select('%subSection%'),
+}
+// export const { clear%SubSection% } = slice.actions
+export default slice.reducer

template/views/SubSectionShow.js

@@ -1,35 +1,25 @@
 import React /*, { useEffect } */ from 'react'
 // import PropTypes from 'prop-types'
-import { compose } from 'redux'
-import { connect } from 'react-redux'
-import { useParams } from 'react-router-dom'
+// import * as Types from 'types'
+// import { useDispatch, useSelector } from 'react-redux'
+// import { useParams } from 'react-router-dom'
 // import { Spinner } from 'lp-components'
-// import { selectors } from '../reducer'
-// import * as actions from '../actions'
+// import { clear%SubSection%, selectors } from '../slice'
 // import * as apiActions from 'api-actions'
-// import * as Types from 'types'
 
-const propTypes = {
-  // %subSection%: Types.%SubSection%,
-  // fetch%SubSection%: PropTypes.func.isRequired,
-  // clear%SubSection%: PropTypes.func.isRequired,
-}
+const propTypes = {}
 const defaultProps = {}
 
-function %SubSection%Show (
-  // {
-  //   %subSection%,
-  //   fetch%SubSection%,
-  //   clear%SubSection%,
-  // }
-) {
-  const { id } = useParams()
+function %SubSection%Show () {
+  // const { id } = useParams()
+  // const %subSection% = useSelector(selectors.%subSection%)
+  // const dispatch = useDispatch()
   //
   // useEffect(() => {
-  //  fetch%SubSection%(id)
+  //  dispatch(apiActions.fetch%SubSection%(id))
   //  // Cleanup
-  //  return () => clear%SubSection%()
-  // }, [ id ])
+  //  return () => dispatch(clear%SubSection%())
+  // }, [dispatch, id])
   //
   // if (!%subSection%) return <Spinner />
   //
@@ -41,17 +31,4 @@ function %SubSection%Show (
 %SubSection%Show.propTypes = propTypes
 %SubSection%Show.defaultProps = defaultProps
 
-function mapStateToProps (/* state */) {
-  return {
-    // %subSection%: selectors.%subSection%(state)
-  }
-}
-
-const mapDispatchToProps = {
-  // fetch%SubSection%: apiActions.fetch%SubSection%,
-  // clear%SubSection%: actions.clear%SubSection%
-}
-
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-)(%SubSection%Show)
+export default %SubSection%Show