Amber Shopify Project created using ReactJS+React-Redux with GraphQL API integration. Storefront Shopify API: https://github.com/Shopify/shopify-app-js/tree/main/packages/api-clients/storefront-api-client#readme
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

productSlice.js 3.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
  2. import ProductService from '../../services/ProductService';
  3. const initialState = {
  4. product:{
  5. data: {},
  6. status: 'idle',
  7. error: null,
  8. },
  9. products:{
  10. data: [],
  11. status: 'idle',
  12. error: null,
  13. },
  14. productsHistory:{
  15. data: [],
  16. status: 'idle',
  17. error: null,
  18. },
  19. productsSelected:[],
  20. ProductsSuggestion:[]
  21. };
  22. export const fetchProduct = createAsyncThunk(
  23. 'product/fetchProduct',
  24. async (pid) => {
  25. const response = await ProductService.getProduct(pid)
  26. return response
  27. }
  28. )
  29. export const fetchProducts = createAsyncThunk(
  30. 'product/fetchProducts',
  31. async ({maxResults, sortBy, customQuery}) => {
  32. const response = await ProductService.getProducts(maxResults, sortBy, customQuery)
  33. return response
  34. }
  35. )
  36. export const fetchProductsByCollection = createAsyncThunk(
  37. 'product/fetchProductsByCollection',
  38. async ({collectionId}) => {
  39. const response = await ProductService.getProductsByCollection(collectionId)
  40. return response
  41. }
  42. )
  43. export const fetchProductsHistory = createAsyncThunk(
  44. 'product/fetchProductsHistory',
  45. async (productIDList) => {
  46. const idsQuery = productIDList.map(id => `id:${id}`).join(" OR ");
  47. const response = await ProductService.getProducts(6, "TITLE", idsQuery)
  48. return response
  49. }
  50. )
  51. export const productSlice = createSlice({
  52. name: 'product',
  53. initialState,
  54. extraReducers: (builder) => {
  55. builder
  56. .addCase(fetchProducts.pending, (state) => {
  57. state.products.status = 'loading';
  58. state.products.error = null;
  59. })
  60. .addCase(fetchProducts.fulfilled, (state, action) => {
  61. state.products.status = 'succeeded';
  62. state.products.data = action.payload
  63. })
  64. .addCase(fetchProducts.rejected, (state, action) => {
  65. state.products.status = 'failed';
  66. state.products.data = [];
  67. state.products.error = action.error.message;
  68. })
  69. .addCase(fetchProduct.pending, (state) => {
  70. state.product.status = 'loading';
  71. state.product.error = null;
  72. })
  73. .addCase(fetchProduct.fulfilled, (state, action) => {
  74. state.product.status = 'succeeded';
  75. state.product.data = action.payload
  76. })
  77. .addCase(fetchProduct.rejected, (state, action) => {
  78. state.product.status = 'failed';
  79. state.product.data = {};
  80. state.product.error = action.error.message;
  81. })
  82. .addCase(fetchProductsByCollection.pending, (state) => {
  83. state.products.status = 'loading';
  84. state.products.error = null;
  85. })
  86. .addCase(fetchProductsByCollection.fulfilled, (state, action) => {
  87. state.products.status = 'succeeded';
  88. state.products.data = action.payload
  89. })
  90. .addCase(fetchProductsByCollection.rejected, (state, action) => {
  91. state.products.status = 'failed';
  92. state.products.data = [];
  93. state.products.error = action.error.message;
  94. })
  95. .addCase(fetchProductsHistory.pending, (state) => {
  96. state.productsHistory.status = 'loading';
  97. state.productsHistory.error = null;
  98. })
  99. .addCase(fetchProductsHistory.fulfilled, (state, action) => {
  100. state.productsHistory.status = 'succeeded';
  101. state.productsHistory.data = action.payload
  102. })
  103. .addCase(fetchProductsHistory.rejected, (state, action) => {
  104. state.productsHistory.status = 'failed';
  105. state.productsHistory.data = [];
  106. state.productsHistory.error = action.error.message;
  107. })
  108. }
  109. });
  110. export default productSlice.reducer;