Use redux toolkit (#25)

This transitions superglue to use redux toolkit. Notable changes here include: 1. The `flash` is no longer managed by superglue. Instead, its a slice that listens to dispatched superglue events. The slice is generated automatically when you first install superglue. This is backward breaking, to add the flash back you would have to add a flash slice: ```js import { createSlice, createAction } from '@reduxjs/toolkit' import { SAVE_RESPONSE, BEFORE_VISIT} from '@thoughtbot/superglue' const saveResponse = createAction(SAVE_RESPONSE) const beforeVisit = createAction(BEFORE_VISIT) export const flashSlice = createSlice({ name: 'flash', initialState: {}, extraReducers: (builder) => { builder.addCase(beforeVisit, (state, action) => { return {} }) builder.addCase(saveResponse, (state, action) => { const { page } = action.payload; return { ...state, ...page.slices.flash } }) } }) ``` and select the state via ```js const flash = useSelector((state) => state.flash) ``` 2. Similarly, we created a `slices/pages` to more easily allow for developer customizations. This replaces the `applicationPagesReducer` in the previous `reducer.js` file. 3. We refactor the creation of the redux store into its own `store.js` file to make it more obvious for developers to customize.
thoughtbot · Oct 7, 2023 · 4218841 · 4218841
1 parent cc63ef7
commit 4218841
Show file tree

Hide file tree

Showing 27 changed files with 131 additions and 222 deletions.
diff --git a/superglue/lib/action_creators/requests.js b/superglue/lib/action_creators/requests.js
@@ -8,7 +8,6 @@ import {
   removePropsAt,
 } from '../utils'
 import {
-  CLEAR_FLASH,
   BEFORE_FETCH,
   BEFORE_VISIT,
   BEFORE_REMOTE,
@@ -66,15 +65,6 @@ function buildMeta(pageKey, page, state) {
   }
 }
 
-export function clearFlash({ pageKey }) {
-  return {
-    type: CLEAR_FLASH,
-    payload: {
-      pageKey,
-    },
-  }
-}
-
 export function remote(
   path,
   {
@@ -95,8 +85,9 @@ export function remote(
       body,
     })
     pageKey = pageKey || getState().superglue.currentPageKey
+    const currentPageKey = getState().superglue.currentPageKey
 
-    dispatch(beforeRemote({ fetchArgs }))
+    dispatch(beforeRemote({ currentPageKey, fetchArgs }))
     dispatch(beforeFetch({ fetchArgs }))
 
     return fetch(...fetchArgs)
@@ -142,9 +133,6 @@ export function visit(
   let pageKey = urlToPageKey(path)
 
   return (dispatch, getState) => {
-    const currentKey = getState().superglue.currentPageKey
-    dispatch(clearFlash({ pageKey: currentKey }))
-
     placeholderKey = placeholderKey && urlToPageKey(placeholderKey)
     const hasPlaceholder = !!getState().pages[placeholderKey]
 
@@ -175,7 +163,8 @@ export function visit(
       signal,
     })
 
-    dispatch(beforeVisit({ fetchArgs }))
+    const currentPageKey = getState().superglue.currentPageKey
+    dispatch(beforeVisit({ currentPageKey, fetchArgs }))
     dispatch(beforeFetch({ fetchArgs }))
 
     lastVisitController.abort()

diff --git a/superglue/lib/actions.js b/superglue/lib/actions.js
@@ -4,7 +4,6 @@ export const BEFORE_REMOTE = '@@superglue/BEFORE_REMOTE'
 
 export const SAVE_RESPONSE = '@@superglue/SAVE_RESPONSE'
 export const HANDLE_GRAFT = '@@superglue/HANDLE_GRAFT'
-export const CLEAR_FLASH = '@@superglue/CLEAR_FLASH'
 
 export const SUPERGLUE_ERROR = '@@superglue/ERROR'
 export const GRAFTING_ERROR = '@@superglue/GRAFTING_ERROR'

diff --git a/superglue/lib/index.js b/superglue/lib/index.js
@@ -27,6 +27,7 @@ export {
   REMOVE_PAGE,
   GRAFTING_ERROR,
   GRAFTING_SUCCESS,
+  HISTORY_CHANGE,
 } from './actions'
 
 export {
@@ -46,8 +47,11 @@ export { getIn } from './utils/immutability'
 export { urlToPageKey }
 
 function pageToInitialState(key, page) {
+  const slices = page.slices || {}
+
   return {
     pages: { [key]: page },
+    ...slices,
   }
 }
 

diff --git a/superglue/lib/reducers/index.js b/superglue/lib/reducers/index.js
@@ -1,7 +1,6 @@
 import { setIn, getIn, urlToPageKey } from '../utils'
 import {
   REMOVE_PAGE,
-  CLEAR_FLASH,
   SAVE_RESPONSE,
   HANDLE_GRAFT,
   HISTORY_CHANGE,
@@ -96,15 +95,6 @@ export function appendReceivedFragmentsOntoPage(
   return nextState
 }
 
-export function addFlash(state, pageKey, receivedFlash) {
-  const nextState = { ...state }
-  const nextPage = { ...state[pageKey] }
-  nextPage.flash = { ...nextPage.flash, ...receivedFlash }
-  nextState[pageKey] = nextPage
-
-  return nextState
-}
-
 export function graftNodeOntoPage(state, pageKey, node, pathToNode) {
   if (!node) {
     console.warn(
@@ -132,7 +122,6 @@ export function handleGraft(state, pageKey, page) {
     data: receivedNode,
     path: pathToNode,
     fragments: receivedFragments = [],
-    flash: receivedFlash,
   } = page
 
   return [
@@ -144,7 +133,6 @@ export function handleGraft(state, pageKey, page) {
         pageKey,
         receivedFragments
       ),
-    (nextState) => addFlash(nextState, pageKey, receivedFlash),
   ].reduce((memo, fn) => fn(memo), state)
 }
 
@@ -185,16 +173,6 @@ export function pageReducer(state = {}, action) {
 
       return nextState
     }
-    case CLEAR_FLASH: {
-      const { pageKey } = action.payload
-      const nextState = { ...state }
-      const nextPage = { ...state[pageKey] }
-
-      nextPage.flash = {}
-      nextState[pageKey] = nextPage
-
-      return nextState
-    }
     case COPY_PAGE: {
       const nextState = { ...state }
       const { from, to } = action.payload

diff --git a/superglue/lib/utils/react.js b/superglue/lib/utils/react.js
@@ -14,12 +14,11 @@ export function mapStateToProps(
   let params = ownProps
   const csrfToken = state.superglue.csrfToken
   pageKey = urlToPageKey(pageKey)
-  const { data, flash, fragments } = state.pages[pageKey] || {
+  const { data, fragments } = state.pages[pageKey] || {
     data: {},
-    flash: {},
     fragments: [],
   }
-  return { ...data, ...params, pageKey, csrfToken, flash, fragments }
+  return { ...data, ...params, pageKey, csrfToken, fragments }
 }
 
 export const mapDispatchToProps = {

diff --git a/superglue/spec/features/navigation.spec.js b/superglue/spec/features/navigation.spec.js
@@ -71,7 +71,6 @@ describe('start', () => {
       data: {
         heading: 'this is page 1',
       },
-      flash: {},
       componentIdentifier: 'home',
       assets: ['123.js', '123.css'],
       fragments: [],
@@ -106,7 +105,6 @@ describe('start', () => {
           data: {
             heading: 'this is page 1',
           },
-          flash: {},
           componentIdentifier: 'home',
           assets: ['123.js', '123.css'],
           fragments: [],
@@ -137,7 +135,6 @@ describe('navigation', () => {
         data: {
           heading: 'this is page 1',
         },
-        flash: {},
         componentIdentifier: 'home',
         assets: ['123.js', '123.css'],
         fragments: [],
@@ -165,7 +162,6 @@ describe('navigation', () => {
 
       const pageState = {
         data: { heading: 'Some heading 2' },
-        flash: {},
         csrfToken: 'token',
         assets: ['application-123.js', 'application-123.js'],
         componentIdentifier: 'about',
@@ -194,7 +190,6 @@ describe('navigation', () => {
         data: {
           heading: 'this is page 1',
         },
-        flash: {},
         componentIdentifier: 'home',
         assets: ['123.js', '123.css'],
         fragments: [],
@@ -230,7 +225,6 @@ describe('navigation', () => {
 
       const pageState = {
         data: { heading: 'Some heading 2' },
-        flash: {},
         csrfToken: 'token',
         assets: ['application-123.js', 'application-123.js'],
         componentIdentifier: 'about',
@@ -272,7 +266,6 @@ describe('navigation', () => {
           data: {
             heading: 'this is page 1',
           },
-          flash: {},
           componentIdentifier: 'home',
           assets: ['123.js', '123.css'],
           fragments: [],
@@ -315,7 +308,6 @@ describe('navigation', () => {
         data: {
           heading: 'this is page 1',
         },
-        flash: {},
         componentIdentifier: 'home',
         assets: ['123.js', '123.css'],
         fragments: [],
@@ -369,7 +361,6 @@ describe('navigation', () => {
         data: {
           heading: 'this is page 1',
         },
-        flash: {},
         componentIdentifier: 'home',
         assets: ['123.js', '123.css'],
         fragments: [],
@@ -419,7 +410,6 @@ describe('navigation', () => {
         data: {
           heading: 'this is page 1',
         },
-        flash: {},
         componentIdentifier: 'home',
         assets: ['123.js', '123.css'],
         fragments: [],
@@ -496,7 +486,6 @@ describe('navigation', () => {
         data: {
           heading: 'this is page 1',
         },
-        flash: {},
         componentIdentifier: 'home',
         assets: ['123.js', '123.css'],
         fragments: [],
@@ -540,7 +529,6 @@ describe('navigation', () => {
         data: {
           heading: 'this is page 1',
         },
-        flash: {},
         componentIdentifier: 'home',
         assets: ['123.js', '123.css'],
         fragments: [],
@@ -561,7 +549,6 @@ describe('navigation', () => {
 
       const pageState = {
         data: { heading: 'Some heading 2' },
-        flash: {},
         csrfToken: 'token',
         assets: ['application-123.js', 'application-123.js'],
         componentIdentifier: 'about',
@@ -591,7 +578,6 @@ describe('navigation', () => {
           heading: 'this is page 1',
           address: undefined,
         },
-        flash: {},
         fragments: [],
         componentIdentifier: 'home',
       }

diff --git a/superglue/spec/fixtures.js b/superglue/spec/fixtures.js
@@ -5,7 +5,6 @@ export const visitSuccess = () => {
       csrfToken: 'token',
       assets: ['application-123.js', 'application-123.js'],
       componentIdentifier: 'about',
-      flash: {},
       fragments: [],
     }),
     headers: {
@@ -23,7 +22,6 @@ export const graftSuccessWithNewZip = () => {
       path: 'data.address',
       csrfToken: 'token',
       assets: ['application-new123.js', 'application-new123.js'],
-      flash: {},
       fragments: [],
     }),
     headers: {

diff --git a/superglue/spec/lib/action_creators.spec.js b/superglue/spec/lib/action_creators.spec.js
@@ -272,6 +272,7 @@ describe('action creators', () => {
         {
           type: '@@superglue/BEFORE_REMOTE',
           payload: {
+            currentPageKey: "/bar",
             fetchArgs: [
               '/foo?props_at=data.body&__=0',
               {
@@ -327,6 +328,7 @@ describe('action creators', () => {
         {
           type: '@@superglue/BEFORE_REMOTE',
           payload: {
+            currentPageKey: "/bar",
             fetchArgs: [
               '/foo?props_at=data.body.aside.top&__=0',
               {
@@ -780,7 +782,7 @@ describe('action creators', () => {
       const expectedActions = [
         {
           type: '@@superglue/BEFORE_REMOTE',
-          payload: { fetchArgs: ['/foo?__=0', expect.any(Object)] },
+          payload: { currentPageKey: "/bar", fetchArgs: ['/foo?__=0', expect.any(Object)] },
         },
         {
           type: '@@superglue/BEFORE_FETCH',
@@ -856,7 +858,7 @@ describe('action creators', () => {
       const expectedActions = [
         {
           type: '@@superglue/BEFORE_REMOTE',
-          payload: { fetchArgs: ['/foo?__=0', expect.any(Object)] },
+          payload: { currentPageKey: '/bar', fetchArgs: ['/foo?__=0', expect.any(Object)] },
         },
         {
           type: '@@superglue/BEFORE_FETCH',
@@ -987,7 +989,7 @@ describe('action creators', () => {
       const expectedActions = [
         {
           type: '@@superglue/BEFORE_REMOTE',
-          payload: { fetchArgs: ['/foo?__=0', expect.any(Object)] },
+          payload: { currentPageKey: "/bar", fetchArgs: ['/foo?__=0', expect.any(Object)] },
         },
         {
           type: '@@superglue/BEFORE_FETCH',
@@ -1021,7 +1023,7 @@ describe('action creators', () => {
       const expectedActions = [
         {
           type: '@@superglue/BEFORE_REMOTE',
-          payload: { fetchArgs: ['/foo?__=0', expect.any(Object)] },
+          payload: { currentPageKey: "/bar", fetchArgs: ['/foo?__=0', expect.any(Object)] },
         },
         {
           type: '@@superglue/BEFORE_FETCH',
@@ -1060,7 +1062,7 @@ describe('action creators', () => {
       const expectedActions = [
         {
           type: '@@superglue/BEFORE_REMOTE',
-          payload: { fetchArgs: ['/foo?__=0', expect.any(Object)] },
+          payload: { currentPageKey: "/bar", fetchArgs: ['/foo?__=0', expect.any(Object)] },
         },
         {
           type: '@@superglue/BEFORE_FETCH',
@@ -1316,7 +1318,6 @@ describe('action creators', () => {
             data: {
               address: {},
             },
-            flash: {},
             csrfToken: 'token',
             assets: [
               'application-new123.js',
@@ -1333,10 +1334,6 @@ describe('action creators', () => {
       fetchMock.mock('/details?props_at=data.address&__=0', mockResponse)
 
       const expectedActions = [
-        {
-          type: '@@superglue/CLEAR_FLASH',
-          payload: { pageKey: '/current' },
-        },
         {
           type: '@@superglue/COPY_PAGE',
           payload: { from: '/current', to: '/details' },