How to call an action from another slice in the redux toolkit?

Question

The modal windows interaction logic is in modalSlice. userSlice contains the code for an asynchronous request to the server to get chat data. After getting the data, I want to open modal window. The window opening function is in modalSlice.showChat(). How to call this function?

const reducer = combineReducers({
  mapSlice: mapSlice,
  userSlice: userSlice,
  modalSlice: modalSlice,
})

const userSlice = createSlice({
  name: 'userSlice',
  initialState: initialState,
  reducers: {... },
  extraReducers: {         
    [fetchData.fulfilled]: (state, action) => {       
       // How to execute the function showChat() of the reducer
       // from modalSlice from this slice function useSlice?
    }
  }
})

• dispatch - cannot be called
• state.modalSlice.showChat() - not working

UPD : Can I change the state in modal modalSlice directly from userSlice after receiving the data? For example state.modalSlice.chatOpen = true

Answer 1

If I have understood your question right you want to dispatch showChat after that data has been fetched.

Since fetchData is an Async Thunk you can make use of the thunk api to use dispatch directly from the thunk where the data is fetched

Here is how it can be done

export const fetchData = createAsyncThunk('userSlice/fetchData', async (params, {dispatch}) => {
  const result = await getData()
  //here you can check if result is what you want and dispatch accordingly
  if (result)
  dispatch(showChat(result))
  return result
})

I hope this helps