GumusLab / clustergrammer

WebGL Clustergrammer JavaScript Library

Home Page:https://ismms-himc.github.io/clustergrammer-gl/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Fix typings for store

moromis opened this issue · comments

In adding namespaced redux store behavior to make multiple instances of Clustergrammer work on the same page, typings were broken. There's a few issues which concern this interface in store.ts

export interface NamespacedStore extends Store {
  actions: any;
  select: (path: string | string[]) => any;
  selectAll: () => Record<SliceNames, any>;
}

Typings for select and selectAll

  • selectAll should be easy since right now it's returning Record<SliceNames, any> and we just need to replace any with RootState
  • select can probably just replace string with SliceNames? It's unlikely that we can fix string[] and don't really use it anyways. It also needs to return a better type than any, maybe Partial<RootState> or something else that will at least get us going on type hints?

Typings for actions
This is a big one and I'm not exactly sure how to go about it. We'll probably have to rewrite all our slices in this way:

- import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+ import {
+   createSlice,
+   PayloadAction,
+   SliceCaseReducers,
+   ValidateSliceCaseReducers,
+ } from "@reduxjs/toolkit";
import { merge } from "lodash";
+ import { RootState } from "../store/store";

export interface ArrsState {
  opacity_arr: any[];
  position_arr: {
    ini: any[][];
    new: any[][];
  };
}

const initialState: ArrsState = {} as ArrsState;

+ const reducers = {
+  setArrsState: (state: RootState, action: PayloadAction<ArrsState>) => {
+    state = action.payload;
+    return state;
+  },
+  mutateArrsState: (state: RootState, action: PayloadAction<Partial<ArrsState>>) => {
+    state = merge(state, action.payload);
+    return state;
+  },
+};

+ export type ArrsActions = keyof typeof reducers; // THIS IS THE IMPORTANT BIT

export const arrsSlice = (id: string) =>
  createSlice({
    name: `${id}_arrs`,
    initialState,
    // The `reducers` field lets us define reducers and generate associated actions
+   reducers: reducers as ValidateSliceCaseReducers<
+      ArrsState,
+      SliceCaseReducers<ArrsState>
+   >,
-    reducers: {
-      setArrsState: (state, action: PayloadAction<ArrsState>) => {
-        state = action.payload;
-        return state;
-      },
-      mutateArrsState: (state, action: PayloadAction<Partial<ArrsState>>) => {
-        state = merge(state, action.payload);
-        return state;
-      },
-    },
  });

And then doing a union of all the actions types as the type of actions.