Add slice actions to reducer prop on Slice type

The return value of createSlice is a Slice type that has a reducer prop with the original State passed in to Reducer.

export declare interface Slice<State = any, CaseReducers extends SliceCaseReducers<State> = SliceCaseReducers<State>> {
    /**
     * The slice name.
     */
    name: string;
    /**
     * The slice's reducer.
     */
    reducer: Reducer<State>;  // Why not Reducer<State, SliceAction>??
    /**
     * Action creators for the types of actions that are handled by the slice
     * reducer.
     */
    actions: CaseReducerActions<CaseReducers>;
    /**
     * The individual case reducer functions that were passed in the `reducers` parameter.
     * This enables reuse and testing if they were defined inline when calling `createSlice`.
     */
    caseReducers: SliceDefinedCaseReducers<CaseReducers>;
}

Can we have the second argument to Reducer passed in as well? Otherwise this reducer (and any others pass into configureStore will mean store.dispatch will accept AnyAction.

[evertbouw]

I also have this problem. I think I’m going to use createReducer instead

const increment = createAction<number, "counter/increment">("counter/increment");
const decrement = createAction<number, "counter/decrement">("counter/decrement");

const counter = createReducer(0, builder => builder
  .addCase(increment, (state, action) => state + action.payload)
  .addCase(decrement, (state, action) => state - action.payload)
);

type MyActions = ReturnType<typeof increment | typeof decrement>;

Having to do createAction is a little more boilerplate but I don’t really see a way around it

[dorsett85]

Yes exactly, sorry if I was unclear.

I have a custom hook: const useAppDispatch = () => useDispatch<AllActionTypesCombined>();

It’s easy to have AllActionTypesCombined with context api and/or redux as it’s part of my types already, but it would be nice to have access to AllSliceActions from the Slice type created by createSlice.

Something like:

const someSlice = createSlice({ ... });

type SomeSliceActions = typeof someSlice.actions; // this is the action creators

type AllActionTypesCombined = SomeSliceActions | SomeOtherSliceActions | ...;

or even better (which is why I mentioned having the actions put on the slice Reducer):

// rootReducer would presumably have AllActionTypesCombined
const rootReducer = combineReducers({ ... }); 

type AllActionTypesCombined = typeof rootReducer.actions // Get it from here??

or best:

export const useAppDispatch = () => useDispatch<typeof store.dispatch>();
// current type is: ThunkDispatch<CombinedState<AppState>, undefined, AnyAction> & Dispatch<AnyAction>
// would want: ThunkDispatch<CombinedState<AppState>, undefined, AllActionTypesCombined> & Dispatch<AllActionTypesCombined>

Let me know if I’m missing something easy.