Adding function in Slice for redux

Question

Please help me how I can introduce new function like getOrdersByCustomer in ordersSlice. I have provided full code of ordersSlice below. Please tell me what is extraReducers and how it works.

import { createSlice, createAsyncThunk, createEntityAdapter } from '@reduxjs/toolkit';
import axios from 'axios';

export const getOrders = createAsyncThunk('eCommerceApp/orders/getOrders', async () => {
    const response = await axios.get('/api/e-commerce-app/orders');
    const data = await response.data;

    return data;
});

export const removeOrders = createAsyncThunk(
    'eCommerceApp/orders/removeOrders',
    async (orderIds, { dispatch, getState }) => {
        await axios.post('/api/e-commerce-app/remove-orders', { orderIds });

        return orderIds;
    }
);

const ordersAdapter = createEntityAdapter({});

export const { selectAll: selectOrders, selectById: selectOrderById } = ordersAdapter.getSelectors(
    state => state.eCommerceApp.orders
);

const ordersSlice = createSlice({
    name: 'eCommerceApp/orders',
    initialState: ordersAdapter.getInitialState({
        searchText: ''
    }),
    reducers: {
        setOrdersSearchText: {
            reducer: (state, action) => {
                state.searchText = action.payload;
            },
            prepare: event => ({ payload: event.target.value || '' })
        }
    },
    extraReducers: {
        [getOrders.fulfilled]: ordersAdapter.setAll,
        [removeOrders.fulfilled]: (state, action) => ordersAdapter.removeMany(state, action.payload)
    }
});

export const { setOrdersSearchText } = ordersSlice.actions;

export default ordersSlice.reducer;

In Addition

Also can you please tell me what I will do with this following code for my custom function getOrdersByCustomer.

export const { selectAll: selectOrders, selectById: selectOrderById } = ordersAdapter.getSelectors(
    state => state.eCommerceApp.orders
);

because, in my component I have used like

const orders = useSelector(selectOrders);

Answer 1

You can introduce new (async) functions as you already have (I used the customerId as part of the url -> you could access it through the params in your backend):

export const getOrdersByCustomer = createAsyncThunk('eCommerceApp/orders/getOrdersByCustomer',       async (customerId) => {
    const response = await axios.get(`/api/e-commerce-app/orders/${customerId}`);
    const data = await response.data;

    return data;
});

Then you can handle the response in your extraReducer:

    extraReducers: {
            [getOrders.fulfilled]: ordersAdapter.setAll,
            [removeOrders.fulfilled]: (state, action) => ordersAdapter.removeMany(state, action.payload),
            [getOrdersByCustomer.fulfilled]: (state, action) => 
              // set your state to action.payload
    }

The extraReducers handle actions like async thunks. The createAsyncThunk function return 3 possible states (along with other things): pending, rejected or fulfilled. In your case you only handle the fulfilled response. You could also set your state with the other two options (in your case [getOrdersByCustomer.pending] or [getOrdersByCustomer.rejected]