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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
|
/**
@license
Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
import {
GET_PRODUCTS,
ADD_TO_CART,
REMOVE_FROM_CART,
CHECKOUT_SUCCESS,
CHECKOUT_FAILURE
} from '../actions/shop.js';
import { createSelector } from 'reselect';
const INITIAL_CART = {
addedIds: [],
quantityById: {}
};
const UPDATED_CART = {
addedIds: ['1'],
quantityById: {'1': 1}
};
const shop = (state = {products: {}, cart: INITIAL_CART}, action) => {
switch (action.type) {
case GET_PRODUCTS:
return {
...state,
products: action.products
};
case ADD_TO_CART:
case REMOVE_FROM_CART:
case CHECKOUT_SUCCESS:
return {
...state,
products: products(state.products, action),
cart: cart(state.cart, action),
error: ''
};
case CHECKOUT_FAILURE:
return {
...state,
error: 'Checkout failed. Please try again'
};
default:
return state;
}
};
// Slice reducer: it only reduces the bit of the state it's concerned about.
const products = (state, action) => {
switch (action.type) {
case ADD_TO_CART:
case REMOVE_FROM_CART:
const productId = action.productId;
return {
...state,
[productId]: product(state[productId], action)
};
default:
return state;
}
};
const product = (state, action) => {
switch (action.type) {
case ADD_TO_CART:
return {
...state,
inventory: state.inventory - 1
};
case REMOVE_FROM_CART:
return {
...state,
inventory: state.inventory + 1
};
default:
return state;
}
};
const cart = (state = INITIAL_CART, action) => {
switch (action.type) {
case ADD_TO_CART:
case REMOVE_FROM_CART:
return {
addedIds: addedIds(state.addedIds, state.quantityById, action),
quantityById: quantityById(state.quantityById, action)
};
case CHECKOUT_SUCCESS:
return INITIAL_CART;
default:
return state;
}
};
const addedIds = (state = INITIAL_CART.addedIds, quantityById, action) => {
const productId = action.productId;
switch (action.type) {
case ADD_TO_CART:
if (state.indexOf(productId) !== -1) {
return state;
}
return [
...state,
action.productId
];
case REMOVE_FROM_CART:
// This is called before the state is updated, so if you have 1 item in the
// cart during the remove action, you'll have 0.
if (quantityById[productId] <= 1) {
// This removes all items in this array equal to productId.
return state.filter(e => e !== productId);
}
return state;
default:
return state;
}
};
const quantityById = (state = INITIAL_CART.quantityById, action) => {
const productId = action.productId;
switch (action.type) {
case ADD_TO_CART:
return {
...state,
[productId]: (state[productId] || 0) + 1
};
case REMOVE_FROM_CART:
return {
...state,
[productId]: (state[productId] || 0) - 1
};
default:
return state;
}
};
export default shop;
// Per Redux best practices, the shop data in our store is structured
// for efficiency (small size and fast updates).
//
// The _selectors_ below transform store data into specific forms that
// are tailored for presentation. Putting this logic here keeps the
// layers of our app loosely coupled and easier to maintain, since
// views don't need to know about the store's internal data structures.
//
// We use a tiny library called `reselect` to create efficient
// selectors. More info: https://github.com/reduxjs/reselect.
const cartSelector = state => state.shop.cart;
const productsSelector = state => state.shop.products;
// Return a flattened array representation of the items in the cart
export const cartItemsSelector = createSelector(
cartSelector,
productsSelector,
(cart, products) => {
const items = [];
for (let id of cart.addedIds) {
const item = products[id];
items.push({id: item.id, title: item.title, amount: cart.quantityById[id], price: item.price});
}
return items;
}
);
// Return the total cost of the items in the cart
export const cartTotalSelector = createSelector(
cartSelector,
productsSelector,
(cart, products) => {
let total = 0;
for (let id of cart.addedIds) {
const item = products[id];
total += item.price * cart.quantityById[id];
}
return parseFloat(Math.round(total * 100) / 100).toFixed(2);
}
);
// Return the number of items in the cart
export const cartQuantitySelector = createSelector(
cartSelector,
cart => {
let num = 0;
for (let id of cart.addedIds) {
num += cart.quantityById[id];
}
return num;
}
);
|
