[Glitch] Adds Redux and React-Intl to storybook

Port 8ee8231a43a1e273c167f25411f5ff8e8c81f5cb to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

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<string, unknown> = {},
+) {
+  const initialStateRecord = mergeDeep(initialRootState, stateOverrides);
+  const PatchedRootStateRecord = ImmutableRecord(
+    initialStateRecord,
+    'RootState',
+  );
+  return combineReducers(reducers, PatchedRootStateRecord);
+}

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({
+    getDefaultMiddleware(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,
-    })
       .concat(
         loadingBarMiddleware({
           promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'],