├── .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 | --------------------------------------------------------------------------------