how to inject createAsyncThunk reducers dynamically

[eolamisan]

this code is based on the injectReducer documentation example. it works in that the thunk is triggered. but why since we are only attaching the fulfilled reducer function?:

why does line builder.addCase(theThunk.fulfilled); wire up the thunk up to the store?
why does line store.dispatch({type: 'user/login'}); trigger the thunk?

import {declaredThunk, declaredThunkName} from 'store'
...
// this does not work
const theThunk = createAsyncThunk('user/login', async () => {
      await ApiCall();
    });
    store.injectReducer(
      'slice-name',
      createReducer({}, builder => {
        builder.addCase(theThunk.fulfilled);
      })
    );    

// later triggers the thunk
store.dispatch({type: 'user/login'});
    
    ```

[phryneas]

why does line builder.addCase(theThunk.fulfilled); wire up the thunk up to the store?
why does line store.dispatch({type: 'user/login'}); trigger the thunk?

Both of these... don't do that.

Your code here creates a thunk that is never dispatched or executed in this code. (That would be store.dispatch(theThunk()).)
The dispatch at the bottom doesn't do anything really - it dispatches a plain action (probably without consequences), but not the thunk. These are different things!

If it executed, the .injectReducer would inject a reducer with an empty state and a single case that does not do anything.
It would not add another case to an existing reducer, and as it doesn't have an actual reducer function specified it won't do anything at all (error, probably).

[eolamisan]

hmm, you are right