Fix typings for store
moromis opened this issue · comments
Kevin Ulrich commented
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 returningRecord<SliceNames, any>
and we just need to replaceany
withRootState
select
can probably just replacestring
withSliceNames
? It's unlikely that we can fixstring[]
and don't really use it anyways. It also needs to return a better type thanany
, maybePartial<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
.