Misleading Writing an Async Function Middleware documentation

[KonstantinKolodnitsky]

Hi, guys.

It seems to me that the following code example in the documentation is incorrect

Writing an Async Function Middleware

Why?

1. A Redux Action must be/return and object with type field.
2. The fetchSomeData Action function does not return an object.
3. The asyncFunctionMiddleware will not get executed because of reason 2. You can put a console.log() there and will see it not appearing in the browser's console.

So, the problem here is that any logic you want to put into a middleware does not work, if your Action does not return an object with type.

Am I missing something?

UPDATE 1:

If you create your store old way, like below, it works

const middlewareEnhancer = applyMiddleware(asyncFunctionMiddleware)
export const loaderStore = createStore(combineReducers({}), middlewareEnhancer)

New way with RTK - does not work

export const store = configureStore({
    reducer: {},
    middleware: getDefaultMiddleware => getDefaultMiddleware().concat(asyncFunctionMiddleware)
});

UPDATE 2:

Changing .concat() to .prepend() makes it working.
BUT the logic is still not clear on why there are two types of actions allowed.

[markerikson]

I can assure you that the technique shown in that page does work, and in fact you've almost definitely used that technique. That's actually showing how the Redux "thunk" middleware is implemented.

Per those pages, the key is that middleware form a pipeline. Each middleware gets a chance to look at the action and decide what to do with it, including passing it onwards, skipping it, delaying it, or anything else. But that also means that the order matters. If middleware 1 stops the value and never passes it on, then middleware 2 won't see it.

That means that a middleware can look for values that aren't actually real action objects, like a function or a promise, and do something with it (like calling the function, or awaiting the promise).

[KonstantinKolodnitsky]

Ok, I understand that.
But does it mean that one of the default middlewares stops the pipeline/does not pass the value when I do

const store = configureStore({
    reducer: {},
    middleware: getDefaultMiddleware => getDefaultMiddleware().concat(asyncFunctionMiddleware)
});

?

Because in this case asyncFunctionMiddleware does not get executed

[markerikson]

That's because getDefaultMiddleware() already adds the real thunk middleware to the store, and that is already intercepting and stopping the function from going any further through the middleware pipeline.

If you skipped the thunk middleware with getDefaultMiddleware({thunk: false}).concat(asyncFunctionMiddleware), you'd see it work.

But yes, like I said, order of middleware matters here.

[KonstantinKolodnitsky]

Ok, I see. Thank you.