├── .babelrc
├── public
    ├── main.css
    └── index.html
├── README.md
├── server.js
├── index.js
├── webpack.config.js
├── .gitignore
└── package.json


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015","react"],
3 |   "plugins": ["transform-regenerator","transform-object-rest-spread"]
4 | }


--------------------------------------------------------------------------------
/public/main.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     background-color: #fefefe;
 3 | }
 4 | .container {
 5 |     padding: 2em;
 6 |     margin-top: 2em;
 7 |     background-color:#fff;
 8 | }
 9 | 
10 | .console-reference {
11 |     margin-top: 2em;
12 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # redux-saga-sandbox
 2 | A console-based Redux Saga sandbox
 3 | 
 4 | ## About
 5 | Use this tool to learn Redux Saga in a responsive, browser-based environment.
 6 | 
 7 | ## Installation and Getting Started
 8 | 
 9 | Enusre you have installed `nodejs` from https://nodejs.org/. Something >= 6.x should be fine., You will also need to have a version of `npm` >= 5.2.
10 | 
11 | To install dependencies and start the application run the following commands:
12 | 
13 | `npm install`
14 | 
15 | `npm start`
16 | 
17 | Visit `http://localhost:8082` using Chrome
18 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | import express from 'express';
 2 | import webpack from 'webpack';
 3 | import webpackConfig from './webpack.config'
 4 | import webpackDevMiddleware from 'webpack-dev-middleware';
 5 | import webpackHotMiddleware from "webpack-hot-middleware";
 6 | 
 7 | const compiler = webpack(webpackConfig);
 8 | const port = process.env.PORT || 8082;
 9 | const app = express();
10 | 
11 | app.use(webpackDevMiddleware(compiler, {
12 |     noInfo: true,
13 |     publicPath: webpackConfig.output.publicPath,
14 |     inline:true
15 | }));
16 | app.use(webpackHotMiddleware(compiler, {
17 |     'log': false,
18 |     'path': '/__webpack_hmr',
19 |     'heartbeat': 10 * 1000
20 | }));
21 | app.use(express.static('public'));
22 | 
23 | app.listen(port,()=>{
24 |     console.info(`Generator sandbox is listening on port ${port}.`);
25 | });


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import co from 'co';
 3 | import { createStore, compose, applyMiddleware } from 'redux';
 4 | import createSagaMiddleware from 'redux-saga';
 5 | import * as effects from 'redux-saga/effects';
 6 | import { delay, eventChannel, channel } from 'redux-saga';
 7 | 
 8 | const sagaMiddleware = createSagaMiddleware();
 9 | const store = createStore(a=>a,{},compose(applyMiddleware(sagaMiddleware)));
10 | 
11 | window.store = store;
12 | window.co = co;
13 | window.run = (generatorFn)=>sagaMiddleware.run(generatorFn);
14 | window.effects = effects;
15 | window.dispatch = (action)=>store.dispatch(action);
16 | window.delay = delay;
17 | window.eventChannel = eventChannel;
18 | window.actionChannel = effects.actionChannel;
19 | window.channel = channel;
20 | 
21 | console.log('%c Redux Saga Sandbox', 'color: #333; font-weight: bold; font-size: 24px');


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const path = require('path');
 3 | module.exports = {
 4 |     module: {
 5 |         loaders: [
 6 |             {
 7 |                 loader: "babel-loader",
 8 |                 exclude: [
 9 |                     /(node_modules)/,
10 |                 ],
11 |                 query: {
12 |                     presets: ['es2015','react'],
13 |                     plugins: ['transform-object-rest-spread']
14 |                 }
15 |             }
16 |         ]
17 |     },
18 |     plugins: [
19 |         new webpack.HotModuleReplacementPlugin(),
20 |         new webpack.NoErrorsPlugin()
21 |     ],
22 |     entry: {
23 |         "index": [
24 |             'babel-regenerator-runtime',
25 |             // 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true',
26 |             './'
27 |         ]
28 |     },
29 |     output: {
30 |         path: path.resolve(__dirname, "public"),
31 |         publicPath: "/assets",
32 |         filename: "[name].bundle.js"
33 |     },
34 |     resolve: {
35 |         extensions: ['', '.js', '.jsx'],
36 |     },
37 |     devtool: 'source-map'
38 | };


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | .idea
61 | 
62 | *.bundle.js*


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "generator-sandbox",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "jest",
 8 |     "start": "npx babel-node server.js"
 9 |   },
10 |   "keywords": [],
11 |   "author": "",
12 |   "license": "ISC",
13 |   "dependencies": {
14 |     "babel-core": "^6.18.2",
15 |     "babel-loader": "^6.2.8",
16 |     "babel-plugin-transform-object-rest-spread": "^6.19.0",
17 |     "babel-preset-es2015": "^6.18.0",
18 |     "babel-preset-react": "^6.23.0",
19 |     "babel-regenerator-runtime": "^6.5.0",
20 |     "chance": "^1.0.6",
21 |     "classnames": "^2.2.5",
22 |     "co": "^4.6.0",
23 |     "colors": "^1.1.2",
24 |     "cors": "^2.8.3",
25 |     "express": "^4.17.1",
26 |     "immutable": "^3.8.1",
27 |     "isomorphic-fetch": "^2.2.1",
28 |     "lodash": "^4.17.15",
29 |     "net": "^1.0.2",
30 |     "query-string": "^4.3.4",
31 |     "react": "^15.5.4",
32 |     "react-dom": "^15.4.2",
33 |     "react-redux": "^5.0.5",
34 |     "redux": "^3.6.0",
35 |     "redux-logger": "^3.0.6",
36 |     "redux-saga": "^0.15.3",
37 |     "redux-thunk": "^2.2.0",
38 |     "reselect": "^2.5.4",
39 |     "sandbox": "^0.8.6",
40 |     "socket.io": "^2.0.3",
41 |     "webpack": "^1.13.3",
42 |     "webpack-dev-middleware": "^1.10.1",
43 |     "webpack-hot-middleware": "^2.17.1"
44 |   },
45 |   "devDependencies": {
46 |     "babel-cli": "^6.26.0",
47 |     "chai": "^4.0.2",
48 |     "jest": "^20.0.4",
49 |     "mocha": "^3.4.2",
50 |     "redux-devtools": "^3.4.0",
51 |     "redux-tool": "^1.0.0",
52 |     "webpack-dev-server": "^1.16.5"
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | <head>
  4 |     <title>ES6 Yield / Generator Sandbox</title>
  5 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  6 |     <link href="main.css" rel="stylesheet">
  7 | </head>
  8 | <body>
  9 |     <div class="container">
 10 |         <h1>
 11 |             Redux Saga Sandbox
 12 |         </h1>
 13 |         <h3>
 14 |             (F12 to open Developer Tools)
 15 |         </h3>
 16 |         <section class="console-reference">
 17 |         <h5>Console Reference</h5>
 18 |             <p>
 19 |                 The following variables are available in the console (F12).
 20 |             </p>
 21 |         <table class="table">
 22 |             <thead>
 23 |             <tr>
 24 |                 <th>
 25 |                     Property Name
 26 |                 </th>
 27 |                 <th>
 28 |                     Description
 29 |                 </th>
 30 |                 <th>
 31 |                     Sample Usage
 32 |                 </th>
 33 |             </tr>
 34 |             </thead>
 35 |             <tbody>
 36 |             <tr>
 37 |                 <th>
 38 |                     effects
 39 |                 </th>
 40 |                 <td>
 41 |                     All Redux Saga effects
 42 |                 </td>
 43 |                 <td>
 44 |                     <code>
 45 |                     effects.call(parseFloat,"32a")
 46 |                     </code>
 47 |                 </td>
 48 |             </tr>
 49 |             <tr>
 50 |                 <th>
 51 |                     run
 52 |                 </th>
 53 |                 <td>
 54 |                     Runs a generator as a saga
 55 |                 </td>
 56 |                 <td>
 57 |                     <code>
 58 |                         run(function*(){yield effects.take("SET_VALUE")})
 59 |                     </code>
 60 |                 </td>
 61 |             </tr>
 62 |             <tr>
 63 |                 <th>
 64 |                     delay
 65 |                 </th>
 66 |                 <td>
 67 |                     Delay Utility (from Redux Saga)
 68 |                 </td>
 69 |                 <td>
 70 |                     <code>
 71 |                         yield delay(42);
 72 |                     </code>
 73 |                 </td>
 74 |             </tr>
 75 |             <tr>
 76 |                 <th>
 77 |                     dispatch
 78 |                 </th>
 79 |                 <td>
 80 |                     Dispatches an action to the store in which sagas are running
 81 |                 </td>
 82 |                 <td>
 83 |                     <code>
 84 |                         dispatch({type:"SET_VALUE",value:42})
 85 |                     </code>
 86 |                 </td>
 87 |             </tr>
 88 |             <tr>
 89 |                 <th>
 90 |                     co
 91 |                 </th>
 92 |                 <td>
 93 |                     The co.js library
 94 |                 </td>
 95 |                 <td>
 96 |                     <code>
 97 |                         co.wrap(function*(){return 42});
 98 |                     </code>
 99 |                 </td>
100 |             </tr>
101 |             <tr>
102 |                 <th>
103 |                     eventChannel
104 |                 </th>
105 |                 <td>
106 |                     The event channel constructor from Redux Saga
107 |                 </td>
108 |                 <td>
109 |                     <code>
110 |                         const chan = yield eventChannel(()=>()=>{})
111 |                     </code>
112 |                 </td>
113 |             </tr>
114 |             <tr>
115 |                 <th>
116 |                     actionChannel
117 |                 </th>
118 |                 <td>
119 |                     The action channel constructor from Redux Saga
120 |                 </td>
121 |                 <td>
122 |                     <code>
123 |                         const chan = yield actionChannel("MY_ACTION");
124 |                     </code>
125 |                 </td>
126 |             </tr>
127 |             <tr>
128 |                 <th>
129 |                     channel
130 |                 </th>
131 |                 <td>
132 |                     Generic channel constructor
133 |                 </td>
134 |                 <td>
135 |                     <code>
136 |                         const chan = yield channel();
137 |                     </code>
138 |                 </td>
139 |             </tr>
140 |             </tbody>
141 |         </table>
142 |         </section>
143 |     </div>
144 |     <script src="/assets/index.bundle.js"></script>
145 | </body>
146 | </html>


--------------------------------------------------------------------------------