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);

PixAff · Accepted Answer · 2021-04-11 10:46:34Z

4

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]

answered Apr 11, 2021 at 10:46

PixAff

3494 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Ashikuzzaman Over a year ago

Thanks for your answer. can you please help for my added section?

PixAff Over a year ago

You are welcome. In your added section you (pre-) define a selector (by destructuring and renaming the 2 variables selectOrders and selectOrderById These selectors give you access to the redux store from your React Application

Collectives™ on Stack Overflow

Adding function in Slice for redux

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related