Redux Basket State

Reducers and selectors should be used as observe(stateReducerOrSelectorName).subscribe(...) in the constructor within the js file where actions for the .view file in question are carried out.

constructor() {
  observe(basketReducer).subscribe(({ basket, pending }) => {
   ...
   ...
  });
}

is used as such. Here, we take basket and pending properties from the basketReducer (i.e. state.basket) and carried out actions through these in the method.

Selector​

There are currently numerous selectors under node_modules/shop-packages/redux/basket/selectors.js that will adjust to different usage scenarios.

Selectors created for general use are as below:​

• basketReducer --> state.basket Takes complete basket state. Includes basket, errors, pending properties.

  • Corresponds to basket --> basketSelector.

  • Corresponds to errors --> errorSelector.

  • Corresponds to pending --> pendingSelector.

observe(basketReducer).subscribe(({ basket, errors, pending }) => { ... }); can be used as such.

Or, it can be used with relevant selectors as described below.

• basketSelector --> state.basket.basket Contains items to be shown in the basket such as the list of basket items, discounts, prices and campaigns. Can be used as observe(basketSelector).subscribe(basket => { ... }); .

• errorSelector --> state.basket.errors Contains basket errors. Can be used as observe(errorSelector).subscribe(errors => { ... }); .

• pendingSelector --> state.basket.pending Contains basket hold status data as boolean. Initially returns as true. It means state.basket.basket and state.basket.errors properties are empty. When the state is modified and data is filled in the state.basket.basket and state.basket.errors properties, pending property will be false. It can be used as observe(pendingSelector).subscribe(pending => { ... }); .

Selectors created for specific use are as follows:​

• basketItemListSelector

• basketItemSelector

• giftNoteSelector

• quantitySelector

• discountsSelector

• basketListSelector

• basketErrorSelector

• basketPendingSelector

• observe(aSelectorName).subscribe(name => { ... }); can be used as such.

You can review node_modules/shop-packages/redux/basket/selectors.js file for further details on all selectors.

Reducer​

There are currently numerous reducers under node_modules/shop-packages/redux/basket/reducer.js that will adjust to different usage scenarios.

Reducers are as follows:

• setBasket

• errorBasket

• clearErrorBasket

• pending

You can review node_modules/shop-packages/redux/basket/reducer.js file for further details on all reducers.

Actions​

We need actions to modify data in the basket.

Actions are as follows:

• fetchBasket --> GET (Sends no parameters.) Receives basket data from API, updates state and returns basket data as promise. setQuantity --> PUT (Sends product knowledge (pk) and quantity.) Sends request to API to update item quantity, updates state and returns basket data as promise. removeProduct --> PUT (Sends pk) Sends request to API to remove item from basket, updates state and returns basket data as promise. addProduct --> POST (Sends pk and item quantity on demand. If quantity is not specified, it is accepted as one.) Sends request to API to add item in the basket, updates state and returns basket data as promise. setDiscount --> PATCH (Sends voucher code.) Sends request to API to apply voucher code to the basket, updates state and returns basket data as promise. removeDiscount --> PATCH (Sends no parameters.) Sends request to API to remove active voucher code in the basket, updates state and returns basket data as promise.

You can review node_modules/shop-packages/redux/basket/actions.js file for further details on all actions.