-
Notifications
You must be signed in to change notification settings - Fork 0
/
productsSlice.js
86 lines (73 loc) · 2.8 KB
/
productsSlice.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import { createAsyncThunk, createEntityAdapter, createSelector, createSlice } from "@reduxjs/toolkit"
import axios from "axios"
const productsAdapter = createEntityAdapter()
const initialState = productsAdapter.getInitialState({
status: "idle",
total: null,
skip: null,
limit: null,
error: null,
categories: [],
brands: []
})
const productsSlice = createSlice({
name: "products",
initialState,
reducers: {
},
extraReducers: (builder) => {
builder
.addCase(fetchProducts.pending, (state) => {
state.status = "loading"
})
.addCase(fetchProducts.fulfilled, (state, action) => {
state.status = "success"
productsAdapter.upsertMany(state, action.payload.products)
state.categories.push(...new Map(action.payload.products.map((item) => [item["category"], item])).keys())
state.brands.push(...new Map(action.payload.products.map((item) => [item["brand"], item])).keys())
delete action.payload.products
Object.assign(state, action.payload)
})
.addCase(fetchProducts.rejected, (state, action) => {
state.status = "failed"
state.error = action.error.message ?? action.error.code
})
}
})
export const {
selectAll: selectAllProducts,
selectById: selectProductById,
selectEntities: selectProductsEntities,
selectIds: selectProductsIds,
selectTotal: selectProductsTotal
} = productsAdapter.getSelectors(state => state.products)
export const selectProductsByCategory = createSelector([
selectAllProducts, (state, category) => category
],
(products, category) => {
console.log("Category selector running")
return products.filter(product => product.category === category)
})
export const selectProductsByBrand = createSelector([
selectAllProducts, (state, brand) => brand
],
(products, brand) => {
console.log("Brand selector running")
return products.filter(product => product.brand === brand)
})
export const selectExclusiveProducts = createSelector([
selectAllProducts
], (products) => {
console.log("Calculating exclusive products")
return products.filter(product => product.discountPercentage >= 10 &&
(product.category === "smartphones" ||
product.category === "laptops"))
})
export const selectProductCategories = state => state.products.categories
export const selectProductBrands = state => state.products.brands
export const fetchProducts = createAsyncThunk('products/fetchProducts', async () => {
const response = await axios('https://dummyjson.com/products')
return response.data
})
export const { addProducts } = productsSlice.actions
export default productsSlice.reducer