Suggestion: Update mapBuilders to make it easy to add thunks to a slice

I’ve reviewed issues: #629 and #1045 and looks like due to TS complexity support for defining thunks in createSlice has not been possible.

However, a simpler solution can be adopted which can simplify many common use cases of using thunk in createSlice. Adding a function like addAsyncThunk to builder object will help in setting loading conditions automatically for thunk related actions.

So presently when a user is adding thunk (myThunk) to a slice code looks like:

createSlice({
    name: "mySlice",
    initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder
          .addCase(myThunk.pending, (state) => {state[loadingKey] = true})
          .addCase(myThunk.rejected, (state) => {state[loadingKey] = false})
          .addCase(myThunk.fulfilled, (state, action) => {state[loadingKey] = false; ...other updates})
    }
})

For a slice which has many thunks this becomes very long chain, hard to read and debug. addAsyncThunk will simplify most common use cases in which pending/rejected actions only change the loading state.

So the above code will look like:

createSlice({
    name: "mySlice",
    initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder
          .addAsyncThunk(myThunk, loadingKey: string, fulfilledCallback)
    }
})

[phryneas]

For what it’s worth, this is possible to implement in userspace - if you know the trick:

import {ActionReducerMapBuilder, CaseReducer, AsyncThunk} from '@reduxjs/toolkit'
import {AsyncThunkFulfilledActionCreator} from '@reduxjs/toolkit/dist/createAsyncThunk'

function addAsyncThunk<S, Returned>(builder: ActionReducerMapBuilder<S>, thunk: AsyncThunk<Returned, any, {}>, loadingKey: keyof S, fulfilledCallback: CaseReducer<S, AsyncThunkFulfilledActionCreator<Returned, any, {}>>){
  builder.addCase(thunk.fulfilled, (s,a) => {
    s[loadingKey] = true
    fulfilledCallback(s,a)
  })
  builder.addCase(thunk.rejected, (s,a)=> {
    s[loadingKey] = false
  })
  builder.addCase(thunk.pending, (s,a)=> {
    s[loadingKey] = true
  })
}

This will still need a little more massaging around the types (I’m in a hurry), but it should show how you can do that with given tools already.

[edishu]

@markerikson @phryneas Thanks for clarification! I can use a function like you have suggested.