This example depends on Parcel.js
- Install
parcel-bundler
globally if you have not already done so:
npm install -g parcel-bundler
- Download this repo, install, and run
npm install
npm run start
At the root of the application, in src/index.js
, the Cart
object is initialized and JSON
configuration is passed as props to the Application. Within the application, various elements utilize methods
on the Cart Object
. These methods use the functional setState
paradigm.
For example, within src/App.js
, the button click hander is defined, which calls a method within the cart object. The method returns an object corresponding to an update the application state.
Since the Cart module
is evaluated already at root level, later imports do not cause the page to be reevaluated, but by importing the instance
, other modules now have access to cart methods
. See the ECMA spec and this Stack Overflow discussion
For Example:
decrementProductQuantity(cartId) {
const ind = this.getIndex(this.productList, "cartId", cartId.toString())
const quantity = this.productList[ind].quantity
return (state, props) => {
this.productList[ind].quantity = quantity > 0 ?quantity - 1 : 0;
return { productList: this.getProductList() }
}
}
💥 💫 💥 ✨
Please give feedback. Is this a valid approach according to React standards? Are you aware of better approaches?