Action from reducer returns 'undefined'

Question

I tried to perform my action from filterSlice, but it turns to be undefined. I have the slice (FilterSlice.js):

export const filterSlice = createSlice({
    name: 'filter',
    initialState: {
      ...
      minPrice: 0,
      maxPrice: 2147483647,
      ...
    },
    reducers: { 
      adjustPrice: (state, action) => {
          state.minPrice = action.payload.minPrice;
          state.maxPrice = action.payload.maxPrice;
      }
    },
   ...

Exported action from that slice:

export const { adjustPrice } = filterSlice.reducer;

In another file I'm trying to dispatch that action:

import { ... adjustPrice } from '../features/filter/filterSlice';
...
const dispatch = useDispatch();
...
const handleApplyClick = () => dispatch(adjustPrice(100, 1000));

And it causes an error, because of for some reason adjustPrice() is undefined.

TypeError: Object(...) is not a function handleApplyClick C:/diploma/client/src/components/PriceRangePanel.js:84 84 | const handleApplyClick = () => dispatch(adjustPrice(100, 1000)); | ^ 85 |

Funnily enough it's perfectly fine in Redux Devtools: Redux Devtools example

Could someone please help me?

Answer 1

It is

export const { adjustPrice } = filterSlice.actions;

not filterSlice.reducer