时间戳

首页 > 解决方案 > 在 Slice 中为 redux 添加功能

reactjs - 在 Slice 中为 redux 添加功能

问题描述

请帮助我如何在 ordersSlice 中引入像 getOrdersByCustomer 这样的新功能。我在下面提供了 ordersSlice 的完整代码。请告诉我什么是 extraReducers 以及它是如何工作的。

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;

此外

您还可以告诉我，我将如何处理我的自定义函数 getOrdersByCustomer 的以下代码。

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

因为，在我的组件中，我使用过

const orders = useSelector(selectOrders);

标签： reactjsreduxreact-redux

解决方案

您可以像已有的那样引入新的（异步）函数（我使用 customerId 作为 url 的一部分 -> 您可以通过后端中的参数访问它）：

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

然后你可以在你的 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
    }

extraReducers 处理异步 thunk 之类的操作。该createAsyncThunk函数返回 3 种可能的状态（以及其他状态）：挂起、拒绝或已完成。在您的情况下，您只处理fulfilled响应。您还可以使用其他两个选项设置您的状态（在您的情况下[getOrdersByCustomer.pending]或[getOrdersByCustomer.rejected]

推荐阅读