Skip to content

Commit

Permalink
feat: use @reduxjs/toolkit
Browse files Browse the repository at this point in the history 
This commit simply replaces the `redux` and `redux-thunk` dependencies
with `@reduxjs/toolkit` without fully adopting RTK patterns. This is
done as an incremental step in preparation for adopting those patterns.
  • Loading branch information
@migueloller
migueloller committed Jun 28, 2023
1 parent 6b711ce commit 9c29a74
Show file tree
Hide file tree
Showing 6 changed files with 102 additions and 62 deletions.
3 changes: 1 addition & 2 deletions packages/runtime/package.json
View file
Expand Up @@ -124,6 +124,7 @@
"@emotion/utils": "^1.0.0",
"@makeswift/next-plugin": "0.2.8",
"@popmotion/popcorn": "^0.4.4",
"@reduxjs/toolkit": "^1.9.5",
"@types/cookie": "^0.5.1",
"@types/http-proxy": "^1.17.9",
"@types/is-hotkey": "^0.1.7",
Expand All @@ -150,8 +151,6 @@
"path-to-regexp": "^6.2.1",
"polished": "3.0.3",
"react-player": "^1.12.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"scroll-into-view-if-needed": "^2.2.20",
"set-cookie-parser": "^2.5.1",
"slate": "^0.91.4",
Expand Down
2 changes: 1 addition & 1 deletion packages/runtime/src/state/actions.ts
View file
Expand Up @@ -3,7 +3,7 @@ import type { Operation } from 'ot-json0'
import type { Document } from './modules/read-only-documents'
import type { ComponentType } from './modules/react-components'
import type { Measurable, BoxModel } from './modules/box-models'
import type { ThunkAction } from 'redux-thunk'
import type { ThunkAction } from '@reduxjs/toolkit'
import { ComponentMeta } from './modules/components-meta'
import { PropControllerDescriptor } from '../prop-controllers'
import type { Size } from './react-builder-preview'
Expand Down
16 changes: 9 additions & 7 deletions packages/runtime/src/state/makeswift-api-client.ts
View file
@@ -1,5 +1,4 @@
import { applyMiddleware, createStore, Store as ReduxStore } from 'redux'
import thunk, { ThunkAction, ThunkDispatch } from 'redux-thunk'
import { configureStore as configureReduxStore, ThunkAction } from '@reduxjs/toolkit'

import * as APIResources from './modules/api-resources'
import { Action, apiResourceFulfilled } from './actions'
Expand Down Expand Up @@ -113,10 +112,13 @@ export function fetchAPIResource<T extends APIResourceType>(
}
}

export type Dispatch = ThunkDispatch<State, unknown, Action>
export function configureStore({ serializedState }: { serializedState?: SerializedState }) {
return configureReduxStore({
reducer,
preloadedState: APIResources.getInitialState(serializedState),
})
}

export type Store = ReduxStore<State, Action> & { dispatch: Dispatch }
export type Store = ReturnType<typeof configureStore>

export function configureStore({ serializedState }: { serializedState?: SerializedState }): Store {
return createStore(reducer, APIResources.getInitialState(serializedState), applyMiddleware(thunk))
}
export type Dispatch = Store['dispatch']
79 changes: 50 additions & 29 deletions packages/runtime/src/state/react-builder-preview.ts
View file
@@ -1,15 +1,13 @@
import Router from 'next/router'
import {
applyMiddleware,
combineReducers,
createStore,
Dispatch as ReduxDispatch,
configureStore as configureReduxStore,
Middleware,
MiddlewareAPI,
PreloadedState,
Store as ReduxStore,
} from 'redux'
import thunk, { ThunkAction, ThunkDispatch } from 'redux-thunk'
import Router from 'next/router'
ThunkAction,
Dispatch as ReduxDispatch,
} from '@reduxjs/toolkit'

import deepEqual from '../utils/deepEqual'

Expand Down Expand Up @@ -434,10 +432,12 @@ export function initialize(): ThunkAction<() => void, State, unknown, Action> {
}
}

export type Dispatch = ThunkDispatch<State, unknown, Action>

function measureBoxModelsMiddleware(): Middleware<Dispatch, State, Dispatch> {
return ({ dispatch }: MiddlewareAPI<Dispatch>) =>
function measureBoxModelsMiddleware(): Middleware<
ReduxDispatch<Action>,
State,
ReduxDispatch<Action>
> {
return ({ dispatch }: MiddlewareAPI<ReduxDispatch<Action>>) =>
(next: ReduxDispatch<Action>) => {
return (action: Action): Action => {
switch (action.type) {
Expand Down Expand Up @@ -465,7 +465,11 @@ function measureBoxModelsMiddleware(): Middleware<Dispatch, State, Dispatch> {
}
}

export function messageChannelMiddleware(): Middleware<Dispatch, State, Dispatch> {
export function messageChannelMiddleware(): Middleware<
ReduxDispatch<Action>,
State,
ReduxDispatch<Action>
> {
return ({ dispatch, getState }: MiddlewareAPI<Dispatch, State>) =>
(next: ReduxDispatch<Action>) => {
let cleanUp = () => {}
Expand Down Expand Up @@ -614,7 +618,11 @@ function createAndRegisterPropControllers(
}
}

function propControllerHandlesMiddleware(): Middleware<Dispatch, State, Dispatch> {
function propControllerHandlesMiddleware(): Middleware<
ReduxDispatch<Action>,
State,
ReduxDispatch<Action>
> {
return ({ dispatch, getState }: MiddlewareAPI<Dispatch, State>) =>
(next: ReduxDispatch<Action>) => {
return (action: Action): Action => {
Expand Down Expand Up @@ -678,7 +686,12 @@ if (import.meta.vitest) {
// Arrange
const documentKey = 'documentKey'
const element: ReactPage.Element = { key: 'elementKey', type: 'type', props: {} }
const store = createStore(reducer, applyMiddleware(thunk, propControllerHandlesMiddleware()))
const store = configureReduxStore({
reducer,
middleware(getDefaultMiddleware) {
return getDefaultMiddleware().concat(propControllerHandlesMiddleware())
},
})
const setPropControllers = fn()
const handle = new ElementImperativeHandle()

Expand All @@ -697,7 +710,12 @@ if (import.meta.vitest) {
// Arrange
const documentKey = 'documentKey'
const element: ReactPage.Element = { type: 'reference', key: 'elementKey', value: 'value' }
const store = createStore(reducer, applyMiddleware(thunk, propControllerHandlesMiddleware()))
const store = configureReduxStore({
reducer,
middleware(getDefaultMiddleware) {
return getDefaultMiddleware().concat(propControllerHandlesMiddleware())
},
})
const setPropControllers = fn()
const handle = new ElementImperativeHandle()

Expand All @@ -716,7 +734,7 @@ if (import.meta.vitest) {

function makeswiftApiClientSyncMiddleware(
client: MakeswiftClient,
): Middleware<Dispatch, State, Dispatch> {
): Middleware<ReduxDispatch<Action>, State, ReduxDispatch<Action>> {
return () => (next: ReduxDispatch<Action>) => {
return (action: Action): Action => {
client.makeswiftApiClient.dispatch(action)
Expand All @@ -726,8 +744,6 @@ function makeswiftApiClientSyncMiddleware(
}
}

export type Store = ReduxStore<State, Action> & { dispatch: Dispatch }

export function configureStore({
rootElements,
preloadedState,
Expand All @@ -736,22 +752,27 @@ export function configureStore({
rootElements?: Map<string, Documents.Element>
preloadedState?: PreloadedState<State>
client: MakeswiftClient
}): Store {
}) {
const initialState: PreloadedState<State> = {
...preloadedState,
documents: Documents.getInitialState({ rootElements }),
isPreview: IsPreview.getInitialState(true),
}

return createStore(
return configureReduxStore({
reducer,
initialState,
applyMiddleware(
thunk,
measureBoxModelsMiddleware(),
messageChannelMiddleware(),
propControllerHandlesMiddleware(),
makeswiftApiClientSyncMiddleware(client),
),
)
preloadedState: initialState,
middleware(getDefaultMiddleware) {
return getDefaultMiddleware().concat([
measureBoxModelsMiddleware(),
messageChannelMiddleware(),
propControllerHandlesMiddleware(),
makeswiftApiClientSyncMiddleware(client),
])
},
})
}

export type Store = ReturnType<typeof configureStore>

export type Dispatch = Store['dispatch']
28 changes: 13 additions & 15 deletions packages/runtime/src/state/react-page.ts
View file
@@ -1,11 +1,8 @@
import {
applyMiddleware,
combineReducers,
createStore,
configureStore as configureReduxStore,
PreloadedState,
Store as ReduxStore,
} from 'redux'
import thunk, { ThunkDispatch } from 'redux-thunk'
} from '@reduxjs/toolkit'

import * as Documents from './modules/read-only-documents'
import * as ReactComponents from './modules/react-components'
Expand All @@ -18,7 +15,6 @@ import * as BuilderEditMode from './modules/builder-edit-mode'
import * as Breakpoints from './modules/breakpoints'
import * as Locales from './modules/locales'
import * as Introspection from '../prop-controllers/introspection'
import { Action } from './actions'
import { copyElementReference } from '../prop-controllers/copy'
import { copy as copyFromControl, merge } from '../controls/control'

Expand Down Expand Up @@ -396,10 +392,6 @@ export function getDefaultLocale(state: State): Intl.Locale | null {
return state.locales.defaultLocale ? new Intl.Locale(state.locales.defaultLocale) : null
}

export type Dispatch = ThunkDispatch<State, unknown, Action>

export type Store = ReduxStore<State, Action> & { dispatch: Dispatch }

export function configureStore({
rootElements,
preloadedState,
Expand All @@ -410,15 +402,21 @@ export function configureStore({
preloadedState?: PreloadedState<State>
breakpoints?: Breakpoints.State
locales?: Locales.State
} = {}): Store {
return createStore(
} = {}) {
return configureReduxStore({
reducer,
{
preloadedState: {
...preloadedState,
documents: Documents.getInitialState({ rootElements }),
breakpoints: Breakpoints.getInitialState(breakpoints ?? preloadedState?.breakpoints),
locales: Locales.getInitialState(locales ?? preloadedState?.locales),
},
applyMiddleware(thunk),
)
middleware(getDefaultMiddleware) {
return getDefaultMiddleware()
},
})
}

export type Store = ReturnType<typeof configureStore>

export type Dispatch = Store['dispatch']
36 changes: 28 additions & 8 deletions yarn.lock
View file
Expand Up @@ -2437,6 +2437,16 @@
style-value-types "^3.1.7"
tslib "^1.10.0"

"@reduxjs/toolkit@^1.9.5":
version "1.9.5"
resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.5.tgz#d3987849c24189ca483baa7aa59386c8e52077c4"
integrity sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==
dependencies:
immer "^9.0.21"
redux "^4.2.1"
redux-thunk "^2.4.2"
reselect "^4.1.8"

"@rollup/pluginutils@^4.1.2":
version "4.2.0"
resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.0.tgz#a14bbd058fdbba0a5647143b16ed0d86fb60bd08"
Expand Down Expand Up @@ -5418,6 +5428,11 @@ ignore@^5.2.0:
resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==

immer@^9.0.21:
version "9.0.21"
resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==

immer@^9.0.6:
version "9.0.19"
resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.19.tgz#67fb97310555690b5f9cd8380d38fc0aabb6b38b"
Expand Down Expand Up @@ -7733,15 +7748,15 @@ redent@^3.0.0:
indent-string "^4.0.0"
strip-indent "^3.0.0"

redux-thunk@^2.3.0:
version "2.4.1"
resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714"
integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==
redux-thunk@^2.4.2:
version "2.4.2"
resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b"
integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==

redux@^4.0.5:
version "4.1.2"
resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.2.tgz#140f35426d99bb4729af760afcf79eaaac407104"
integrity sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==
redux@^4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
dependencies:
"@babel/runtime" "^7.9.2"

Expand Down Expand Up @@ -7887,6 +7902,11 @@ requires-port@^1.0.0:
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==

reselect@^4.1.8:
version "4.1.8"
resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524"
integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==

resolve-cwd@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
Expand Down

0 comments on commit 9c29a74

Please sign in to comment.