├── .gitignore
├── README.md
├── index.js
└── package.json


/.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 | package-lock.json


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Redux demo
 2 | Demo project for my Medium article. (https://medium.com/@onuraykac/i%CC%87pin-ucunu-ka%C3%A7%C4%B1rmamak-redux-8d822da0d19b)
 3 | 
 4 | # Install
 5 |     npm install
 6 | 
 7 | # Run
 8 |     node index.js
 9 | 
10 | # Hack and see!
11 | 1- make this changes:
12 | 
13 |     case "UPDATE_NAME":
14 |     state.name = action.payload;
15 |     return state;
16 | 
17 | 2- 
18 | 
19 |     Remove initUser parameter.
20 | 
21 | 3- Change whole reducer function and write this one:
22 | 
23 |     if (action.type === "UPDATE_USER") {
24 |         state = {
25 |             ...state,
26 |             name: action.payload.name,
27 |             age: action.payload.age
28 |         };
29 |     }


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var { createStore, applyMiddleware } = require('redux');
 2 | 
 3 | const initUser = { name: "", age: 0 };
 4 | const userReducer = (state = initUser, action) => {
 5 |     switch (action.type) {
 6 |         case "UPDATE_NAME":
 7 |             state = { ...state, name: action.payload };
 8 |             return state;
 9 |         case "UPDATE_AGE":
10 |             state = { ...state, age: action.payload };
11 |             return state;
12 |         default:
13 |             return state;
14 |     }
15 | };
16 | 
17 | const logger = (store) => (next) => (action) => {
18 |     console.log(">>> An action is fired: ", action);
19 |     next(action);
20 | };
21 | 
22 | const error = (store) => (next) => (action) => {
23 |     try {
24 |         next(action);
25 |     }
26 |     catch (e) {
27 |         console.log("Error occured and handled. Exception message is: ", e.message);
28 |     }
29 | };
30 | 
31 | const middleware = applyMiddleware(logger, error);
32 | 
33 | const store = createStore(userReducer, middleware);
34 | 
35 | store.subscribe(() => {
36 |     console.log("<<< The store is changed", store.getState());
37 | });
38 | 
39 | store.dispatch({ type: "UPDATE_NAME", payload: "Ahmet" });
40 | store.dispatch({ type: "UPDATE_AGE", payload: 31 });
41 | store.dispatch({ payload: "Onur" }); //there must be a type property.
42 | store.dispatch({ type: "UPDATE_NAME", payload: "Onur" });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "reduxdemo",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "redux": "^3.7.2"
13 |   }
14 | }
15 | 


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