dispatch a createAsyncThunk when a reducer si called

[Piero87]

Hello,
I want refresh the content of the page when a state in the slice is changed, I add a sample code just to explain me better:

export const getFeedbacks = createAsyncThunk('feedbacks/get', async (arg, { getState }) => {
...api....
return data[...];
});

const feedbacksSlice = createSlice({
name: 'feedbacks',
initialState: {
filter: 0,
data: []
},
reducers: {
changeFilter: (state, action) => {
state.filter = action.payload;
// HERE>>>>> I want call getFeedbacks
},
extraReducers(builder) {
builder.addCase.......
.....
},

so when the changeFilter is called I want to call the getFeedbacks to refresh data, where I have to make this call? inside the reducer? inside the react component listening for a change of filter inside an useEffect?

[markerikson]

No, you can never make any kind of additional call like that in a reducer.

However, you could try using the new experimental "action listener middleware" we're looking to add to RTK, currently available as a standalone package:

#1648

[Piero87]

@markerikson Thank you very much now it's becoming clearer to me, I miss the addListenerAction or the importing the middleware what you mean? can you please make me an example of the addListenerAction and importing the middleware?

I have one another question about this thing you sad:

This pattern is not necessarily a great idea, as components should ideally be paying more attention to the store state instead of specific actions, but it is valid.

What do you mean? where did you add this listeners you will have in the application?

[markerikson]

The main examples for now would be looking at the test file for the middleware package.

"Importing the middleware" would likely be:

// src/app/listenerMiddleware.js

import { createActionListenerMiddleware } from '@rtk-incubator/action-listener-middleware';

export const listenerMiddleware = createActionListenerMiddleware();

// someOtherFile.js
import { listenerMiddleware } from 'app/listenerMiddleware'

listenerMiddleware.addListener(/* etc */)

The addListenerAction action creator is exported from the package.

Per your other question: middleware are global and added to the store once at setup. As such, we also mostly expect that most listeners are static and added once to the listener middleware as part of the app setup process.

You can add and remove listeners at runtime, from anywhere - we specifically included addListenerAction to make that possible. But as @phryneas has pointed out, Redux is not entirely meant to be used as a pure "event bus", and if components start snooping on actions all the time, that's sort of what you're doing.

So, can you? Yes. Should you? Maybe :)

[Piero87]

@markerikson Thank you very much for the great explanation, so you suggest to add the listener (or most of the listeners) and don't remove them but be part of the setup like the registration of a reducer in the configure store.

Thank you Mark!

[markerikson]

Yeah, "add some listeners once on app setup" is the expected primary use case here, but "dynamic add/remove" is something the middleware explicitly supports because it's potentially useful. (in fact, the condition option itself is just adding another listener at runtime.)

[Piero87]

Yes all clear, at the moment my main target is to write this listener inside the slice where the action of which they are listening reside, to do this I can use the import of the middleware like you suggest and the addListener function, to have all logic of the slice in one place (at the moment I will not unsubscribe those listener)

[Piero87]

@markerikson I'm trying to use it but I have this error:

action-listener-middleware-error TypeError: i.listener is not a function

I have make the simpler inclusion:

import { configureStore } from '@reduxjs/toolkit';
import { createActionListenerMiddleware } from '@rtk-incubator/action-listener-middleware';


/**
 * Reducers
 */
import feedbacksReducer, {changeFilter} from 'features/feedbacks/feedbacksSlice';

const listenerMiddleware = createActionListenerMiddleware();

listenerMiddleware.addListener(changeFilter, (action, listenerApi) => {
  // Run whatever additional side-effect-y logic you want here
  console.log(action);
});


export default configureStore({
  reducer: {
    feedbacks: feedbacksReducer
  },
  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(listenerMiddleware),
});

what am I doing wrong?

[Piero87]

Sorry to go offtopic, yes I made a codesandbox for you:

https://codesandbox.io/s/sharp-easley-1ucn9

if you press the test button you will see the error that I see

thanks for the help

[Piero87]

@markerikson Please tell me if I have to open a new bug discussion, thank you again!

[markerikson]

Aha! You have a typo in your code. You wrote actionCreater, but it's actionCreator (with an 'o'):

listenerMiddleware.addListener({
  actionCreater: changeFilter, // ERROR should be actionCreator
  listener: (action, listenerApi) => {
    console.log(action);
  }
});

So, the middleware code couldn't find the right field and crashed later.

[markerikson]

(note that TypeScript would have caught this :) )

[Piero87]

@markerikson Thank you very much!!! Yes I'm seriously considering switching to typescript