danielstern / redux-saga-cart

A fully-functional shopping cart built with Redux Saga using Yield - Run with accompanying server https://github.com/danielstern/redux-saga-shopping-cart-server

redux-saga-cart

A fully-functional shopping cart built with Redux Saga using Yield

About

redux-saga-cart is a fully functional, non-trivial demo application meant to help intermediate and advanced users understand and use Redux Saga. This project is the finished product that is built in the Pluralsight course redux-saga. (Link coming soon) While running and studying this project is useful to anyone, it is strongly recommended that you build it while watching the Pluralsight course.

Installation

• This application has a seperate back-end component available here: https://github.com/danielstern/redux-saga-shopping-cart-server . The back-end and front-end have been seperated to help make learning redux-saga easier. *

1. Clone and install the server application

2. Clone and install the application [email protected]:danielstern/redux-saga-cart.git && cd redux-saga-cart && npm install

3. Install the babel CLI npm install -g babel babel-cli

Usage

1. Start the application with npm start
2. Open the url http://localhost:8080

Troubleshooting

The application hangs on load

Make sure the demo server is running on the correct port (8081). Make sure the permissions on your computer allow communication between the ports 8080 and 8081. Still getting an error? Copy any errors that appear in dev tools and open an issue.

I don't see anything / I see the wrong thing when navigating to http://localhost:8080

Make sure that the port 8080 is available before running npm start

I get an error when running npm start

Make sure you're running the latest version of node. Make sure the following dependencies are installed globally as not all OS's respect global dependencies:

{
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-plugin-transform-object-rest-spread": "^6.19.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.23.0",
    "babel-regenerator-runtime": "^6.5.0",
    "webpack": "^1.13.3",
    "webpack-dev-middleware": "^1.10.1",
    "webpack-hot-middleware": "^2.17.1",
    "webpack-dev-server": "^1.16.5"
}

redux-saga-cart's Issues

selector does not work

Hi Daniel,
Need Ur advice
first appears in module.6 last practical lesson 9.Checkout Saga
export function* checkout(){
const user = yield select(currentUserSelector)
yield put(setCheckoutPhase(QUANTITY_VERIFICATION_CHECKOUT_PHASE))
....
I'm localize prolem here in currentUserSaga.js,
unfortunatly ReactDev Tools not working at my PC

import { take, put, call, apply, select} from 'redux-saga/effects'
import fetch from 'isomorphic-fetch'
import {
GET_CURRENT_USER_INFO,
setCurrentUser
} from './../actions'

import {
currentUserSelector
} from './../selectors'

export function* currentUserSaga() {
const { id } = yield take(GET_CURRENT_USER_INFO);
const response = yield call(fetch, http://localhost:8081/user/${id})
const data = yield apply(response, response.json)
console.info("ID", id)
console.info("Data?", data)
yield put(setCurrentUser(data))
const user = yield select(currentUserSelector)
console.info("Current User?", user)
}

`npm start` fails, until babel-cli was added

Today i'm started with that course, and npm start fails all the time, even when i checked node version and installed all packaged with sudo command. Only when i add babel-cli, it's successfully launched, just for your information, maybe it will save someones time

yield items.map does not set each individual item

In the itemDetailsSaga following code is written in the course:

export function* itemDetailsSaga() {
const { items } = yield take(SET_CART_ITEMS)
yield items.map((item) => fork(loadItemDetails, item))
}

However this does not set each individual item into the loadItemDetails function. Instead following method works:

Yield all
export function* itemDetailsSaga() {
const { items } = yield take(SET_CART_ITEMS)
yield all(items.map((item) => fork(loadItemDetails, item)))
}

Why the front end code is empty when I try to import it to Visual Studio Code?

Unable to setup the project through the begin branch due to broken packages

After run npm install command I got a warning in the command line:

> [email protected] install /var/www/development/redux-saga/redux-saga-cart/node_modules/uws
> node-gyp rebuild > build_log.txt 2>&1 || exit 0

npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 755 packages from 768 contributors and audited 32 packages in 14.881s
found 2 vulnerabilities (1 low, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

withing package.json file
The command npm audit fix doesn't fix the problem due to some dependencies need to be fixed withing package.json file!

Got a question: why babel CLI isn't added as a required package? It may be loaded from node_modules directory for the npm start command. No everyone uses babel, and sometimes it may be used for a few projects, so maybe there's no need to have installed it globally!

'babel-node' is not recognized as an internal or external command, operable program or batch file.

1. I tried > npm install -g babel-cli
   But still on npm start its giving error
   'babel-node' is not recognized as an internal or external command, operable program or batch file.

TypeError: Converting circular structure to JSON

After solving heaps of broken dependencies, finally the Begin branch showed something different.

Here is the error message:

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
F:\temp\Playground\redux\redux-saga-cart\node_modules\core-js\library\fn\json\stringify.js:4
return $JSON.stringify.apply($JSON, arguments);
^

TypeError: Converting circular structure to JSON
at Object.stringify ()
at stringify (F:\temp\Playground\redux\redux-saga-cart\node_modules\core-js\library\fn\json\stringify.js:4:26)
at compile (F:\temp\Playground\redux\redux-saga-cart\node_modules\babel-cli\node_modules\babel-register\lib\node.js:105:42)
at loader (F:\temp\Playground\redux\redux-saga-cart\node_modules\babel-cli\node_modules\babel-register\lib\node.js:144:14)
at Object.require.extensions.(anonymous function) [as .js] (F:\temp\Playground\redux\redux-saga-cart\node_modules\babel-cli\node_modules\babel-register\lib\node.js:154:7)
at Module.load (internal/modules/cjs/loader.js:630:32)
at tryModuleLoad (internal/modules/cjs/loader.js:570:12)
at Function.Module._load (internal/modules/cjs/loader.js:562:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:801:12)
at Object. (F:\temp\Playground\redux\redux-saga-cart\node_modules\babel-cli\lib_babel-node.js:154:22)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: babel-node server/server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\franv_000\AppData\Roaming\npm-cache_logs\2019-03-09T05_33_55_873Z-debug.log

Here is my package.json
As you can see here, I removed or ^ and added missing packages.

{
  "name": "react-redux-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "start": "babel-node server/server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-core": "6.18.2",
    "babel-loader": "6.2.8",
    "babel-preset-react": "6.23.0",
    "babel-regenerator-runtime": "6.5.0",
    "chance": "1.0.6",
    "classnames": "2.2.5",
    "cors": "2.8.3",
    "express": "4.15.3",
    "immutable": "3.8.1",
    "isomorphic-fetch": "2.2.1",
    "lodash": "4.17.4",
    "query-string": "4.3.4",
    "react": "15.5.4",
    "react-dom": "15.4.2",
    "react-redux": "5.0.5",
    "redux": "3.6.0",
    "redux-logger": "3.0.6",
    "redux-saga": "0.15.5",
    "redux-thunk": "2.2.0",
    "reselect": "2.5.4",
    "socket.io": "2.0.3",
    "webpack": "1.13.3",
    "webpack-dev-middleware": "1.10.1",
    "webpack-hot-middleware": "2.17.1"
  },
  "devDependencies": {
    "babel-plugin-transform-object-rest-spread": "^6.19.0",
    "babel-plugin-transform-regenerator": "^6.26.0",
    "babel-preset-es2015": "^6.18.0",
    "chai": "4.0.2",
    "jest": "20.0.4",
    "mocha": "3.4.2",
    "redux-devtools": "3.4.0",
    "redux-tool": "1.0.0",
    "webpack-dev-server": "1.16.5"
  }
}

Please help.

Client side and server side ports are restricted to talk to each other

Hello, I am having trouble with net::ERR_CONNECTION_REFUSED while fethich the current user information.
I am pretty sure that I've allowed these ports to be available for communicating to each other but the fetch is failing anyway.

....node_modules/@babel/core/lib/config/config-descriptors.js:178 throw new Error(`Plugin/Preset files are not allowed to export objects, only functions. In ${filepath}`);

I get this error when i try to npm install

babel-node not recognized as internal or external command

Getting this error when running npm start command

babel-node not recognized as internal or external command

Ensure you use [email protected] and not 1.x

Just wanted to create an issue for discoverability in case anyone else makes this mistake. If you follow the course instructions, you may run:

npm install redux-saga ---save

or

yarn add redux-saga --save

If you do this as of today, you'll install redux-saga 1.x

You need to ensure you install specifically 0.15.3 as shown in the course unless you want to update all the code examples to work with the new changes in 1.x (which contains breaking changes).

npm install redux-saga@^0.15.3 ---save

or

yarn add redux-saga@^0.15.3 --save

An enterprising learner could do this but I wanted to call it out just in case you're stuck wondering why the code doesn't work 😄

Thanks @danielstern!

Dependency on global install of babel and other packages

First and foremost, great course material. Solid presentation and pace. Thank you. It would be great if the client app install did not rely on the global presence of various packages. Is there a way around this? Thanks in advance for letting me know.

delay import on first Saga

I'm watching your pluralsight videos on 2020 and when you're creating the first app saga you are importing delay like this:
import { delay } from 'redux-saga';

but you should import like this:
import { delay } from 'redux-saga/effects';

I hope it helps!