[Data Explorer] Design state management & implement it

[ashwin-pc]

State Management in Data Explorer

Description:

This outlines the process of implementing a state management in Data Explorer using Redux Toolkit with TypeScript support. The main feature of this solution is to dynamically register reducers from different views, thereby maintaining both shared state and private states.

Proposed Implementation Steps:

1. Shared State Creation:

   We'll begin by setting up a slice for shared state that will be accessible to all views:

   import { configureStore, createSlice, combineReducers } from '@reduxjs/toolkit';
   
   type SharedState = {
     // shared information such as data source and app ID.
   };
   
   const sharedSlice = createSlice({
     name: 'shared',
     initialState: { /* initial shared state */ } as SharedState,
     reducers: { /* shared state reducers */ },
   });
   
   let dynamicReducers = {
     shared: sharedSlice.reducer
   };
   
   let store = configureStore({
     reducer: combineReducers(dynamicReducers)
   });
   
   export type RootState = ReturnType<typeof store.getState>;
   export type AppDispatch = Store['dispatch'];
   export const useTypedDispatch = () => useDispatch<AppDispatch>();
   export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;

2. View State Registration:

   Each view will be able to register its own slice of state:

   // Define a method for registering slices
   function registerSlice(slice: any) {
     dynamicReducers[slice.name] = slice.reducer;
     store.replaceReducer(combineReducers(dynamicReducers));
   
     // Extend RootState to include the new slice
     declare module 'path-to-main-store' {
       interface RootState {
         [slice.name]: ReturnType<typeof slice.reducer>;
       }
     }
   }
   
   // In each view
   import { createSlice } from '@reduxjs/toolkit';
   import { registerSlice } from 'path-to-main-store';
   
   const viewSlice = createSlice({
     name: 'viewId',
     initialState: { /* initial state */ },
     reducers: { /* view reducers */ },
   });
   
   registerSlice(viewSlice);

3. Accessing the State:

   The state for these dynamic slices can be accessed through Redux's getState() method. In a React component, you can use the useSelector hook from react-redux to access a specific slice of the state:

   import { useTypedSelector } from 'path-to-main-store';
   
   function MyComponent() {
     const viewState = useTypedSelector((state: RootState) => state.viewId);
     // ...
   }