# 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.

## <mark style="color:red;">Selector</mark>​ <a href="#selector" id="selector"></a>

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.

{% hint style="danger" %}
You can review `node_modules/shop-packages/redux/basket/selectors.js` file for further details on all selectors.
{% endhint %}

## <mark style="color:red;">Reducer</mark>​ <a href="#reducer" id="reducer"></a>

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

{% hint style="danger" %}
You can review `node_modules/shop-packages/redux/basket/reducer.js` file for further details on all reducers.
{% endhint %}

## <mark style="color:red;">Actions</mark>​ <a href="#actions" id="actions"></a>

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.

{% hint style="danger" %}
You can review `node_modules/shop-packages/redux/basket/actions.js` file for further details on all actions.
{% endhint %}