From 97d3dac4b6f2402be295d20155383cff518c1712 Mon Sep 17 00:00:00 2001 From: Echo Date: Tue, 24 Jun 2025 11:31:27 +0200 Subject: [PATCH] [Glitch] Adds Redux and React-Intl to storybook Port 8ee8231a43a1e273c167f25411f5ff8e8c81f5cb to glitch-soc Signed-off-by: Claire --- .../flavours/glitch/reducers/index.ts | 15 +++++++-- app/javascript/flavours/glitch/store/store.ts | 32 ++++++++++--------- 2 files changed, 29 insertions(+), 18 deletions(-) diff --git a/app/javascript/flavours/glitch/reducers/index.ts b/app/javascript/flavours/glitch/reducers/index.ts index 24c33f70f5..9594ff3448 100644 --- a/app/javascript/flavours/glitch/reducers/index.ts +++ b/app/javascript/flavours/glitch/reducers/index.ts @@ -1,4 +1,4 @@ -import { Record as ImmutableRecord } from 'immutable'; +import { Record as ImmutableRecord, mergeDeep } from 'immutable'; import { loadingBarReducer } from 'react-redux-loading-bar'; import { combineReducers } from 'redux-immutable'; @@ -100,6 +100,15 @@ const initialRootState = Object.fromEntries( const RootStateRecord = ImmutableRecord(initialRootState, 'RootState'); -const rootReducer = combineReducers(reducers, RootStateRecord); +export const rootReducer = combineReducers(reducers, RootStateRecord); -export { rootReducer }; +export function reducerWithInitialState( + stateOverrides: Record = {}, +) { + const initialStateRecord = mergeDeep(initialRootState, stateOverrides); + const PatchedRootStateRecord = ImmutableRecord( + initialStateRecord, + 'RootState', + ); + return combineReducers(reducers, PatchedRootStateRecord); +} diff --git a/app/javascript/flavours/glitch/store/store.ts b/app/javascript/flavours/glitch/store/store.ts index 9f43f58a43..9f83f2f3e1 100644 --- a/app/javascript/flavours/glitch/store/store.ts +++ b/app/javascript/flavours/glitch/store/store.ts @@ -6,24 +6,26 @@ import { errorsMiddleware } from './middlewares/errors'; import { loadingBarMiddleware } from './middlewares/loading_bar'; import { soundsMiddleware } from './middlewares/sounds'; +export const defaultMiddleware = { + // In development, Redux Toolkit enables 2 default middlewares to detect + // common issues with states. Unfortunately, our use of ImmutableJS for state + // triggers both, so lets disable them until our state is fully refactored + + // https://redux-toolkit.js.org/api/serializabilityMiddleware + // This checks recursively that every values in the state are serializable in JSON + // Which is not the case, as we use ImmutableJS structures, but also File objects + serializableCheck: false, + + // https://redux-toolkit.js.org/api/immutabilityMiddleware + // This checks recursively if every value in the state is immutable (ie, a JS primitive type) + // But this is not the case, as our Root State is an ImmutableJS map, which is an object + immutableCheck: false, +} as const; + export const store = configureStore({ reducer: rootReducer, middleware: (getDefaultMiddleware) => - getDefaultMiddleware({ - // In development, Redux Toolkit enables 2 default middlewares to detect - // common issues with states. Unfortunately, our use of ImmutableJS for state - // triggers both, so lets disable them until our state is fully refactored - - // https://redux-toolkit.js.org/api/serializabilityMiddleware - // This checks recursively that every values in the state are serializable in JSON - // Which is not the case, as we use ImmutableJS structures, but also File objects - serializableCheck: false, - - // https://redux-toolkit.js.org/api/immutabilityMiddleware - // This checks recursively if every value in the state is immutable (ie, a JS primitive type) - // But this is not the case, as our Root State is an ImmutableJS map, which is an object - immutableCheck: false, - }) + getDefaultMiddleware(defaultMiddleware) .concat( loadingBarMiddleware({ promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'],