Correct arrangement of redux middleware

Let's say I have feature X and feature Y representing two different aspects of my react system. Each feature has its own redux state slice. In the following example, if X changes, Y should adjust its own state accordingly.

The project structure is as such:

src/features/feature-X/  {components/slice for featureX}
src/features/feature-Y/  {components/slice for featureY}
src/features/base/...etc.

Should I:

• Use a thunk to call the respective reducers on both X and Y so that X and Y are not coupled? (if so, where would I put this thunk? Inside X, Y or somewhere else?)
• Or, should I add a createListenerMiddleware() (https://redux-toolkit.js.org/api/createListenerMiddleware) middleware on X that listens for X's changes and then calls Y's reducers
• Or, should I add a createListenerMiddleware() middleware on Y that listens for X's changes and reacts on its own state accordingly.

If the first, what benefit/scenarios require createListenerMiddleware() that a simple thunk wouldn't handle?

Each state slice you have defined can declare reducer functions that can respond to external actions. These extra reducers are defined on the slice's extraReducers property.

> One of the key concepts of Redux is that each slice reducer "owns" its
> slice of state, and that many slice reducers can independently respond
> to the same action type. extraReducers allows createSlice to respond
> to other action types besides the types it has generated.

Example:

Slice X

import { createSlice } from '@reduxjs/toolkit';
import { actionY } from './sliceY';

const sliceX = createSlice({
  name: "X",
  initialState,
  reducers: {
    actionX: (state, action) => {
      // update X state
    },
  },
  extraReducers: builder => {
    builder
      .addCase(actionY, (state, action) => {
        // update X state based on action Y
      });
  },
});

export { actionX } = sliceX.actions;
export default sliceX;

Slice Y

import { createSlice } from '@reduxjs/toolkit';
import { actionX } from './sliceX';

const sliceY = createSlice({
  name: "Y",
  initialState,
  reducers: {
    actionY: (state, action) => {
      // update Y state
    },
  },
  extraReducers: builder => {
    builder
      .addCase(actionX, (state, action) => {
        // update Y state based on action X
      });
  },
});

export { actionY } = sliceY.actions;
export default sliceY;