TapaniA TapaniAla
TapaniAla
/ Redux 5:Writing a counter with redux final
Last active
June 8, 2017 05:20
JS Bin// source http://jsbin.com/cequnu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function counter(state = 0, action) { | |
| switch (action.type) { | |
| case 'INCREMENT': | |
| return state + 1; | |
| case 'DECREMENT': | |
| return state - 1; | |
| default: | |
| return state; | |
| } | |
| } |
TapaniAla
/ Redux 6: Store methods: getState(),dispatch() and subscribe() final
Last active
June 8, 2017 05:19
JS Bin// source http://jsbin.com/cequnu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const counter = (state = 0, action) => { | |
| switch (action.type) { | |
| case 'INCREMENT': | |
| return state + 1; | |
| case 'DECREMENT': | |
| return state - 1; | |
| default: | |
| return state; | |
| } | |
| } |
TapaniAla
/ Redux 7: Implementing store from cratch final
Last active
June 8, 2017 05:19
JS Bin// source http://jsbin.com/cequnu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const counter = (state = 0, action) => { | |
| switch (action.type) { | |
| case 'INCREMENT': | |
| return state + 1; | |
| case 'DECREMENT': | |
| return state - 1; | |
| default: | |
| return state; | |
| } | |
| } |
TapaniAla
/ Redux 8: React counter example final
Last active
June 8, 2017 05:18
JS Bin// source http://jsbin.com/cequnu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const counter = (state = 0, action) => { | |
| switch (action.type) { | |
| case 'INCREMENT': | |
| return state + 1; | |
| case 'DECREMENT': | |
| return state - 1; | |
| default: | |
| return state; | |
| } | |
| } |
TapaniAla
/ Redux 9: Avoiding array mutations final
Last active
June 8, 2017 05:17
JS Bin// source http://jsbin.com/cequnu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const addCounter = (list) => { | |
| //both are OK: | |
| //return list.concat([0]); | |
| return [...list, 0]; | |
| }; | |
| const removeCounter = (list,index) => { | |
| // not allowed | |
| // list.splice(index, 1); | |
| return [ |
TapaniAla
/ Redux 10: Avoid object mutations
Last active
June 8, 2017 05:17
JS Bin// source http://jsbin.com/cequnu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const toggleTodo = (todo) => { | |
| // not allowed | |
| //todo.completed = !todo.completed; | |
| //this OK | |
| // return { | |
| // id: todo.id, | |
| // text: todo.text, | |
| // completed: !todo.completed | |
| // }; | |
| // note the last assign property wins! |
TapaniAla
/ Redux: writing a todo list reducer final
Last active
June 1, 2017 08:19
JS Bin// source http://jsbin.com/cequnu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const todos = (state=[], action) => { | |
| switch (action.type) { | |
| case 'ADD_TODO': | |
| return [ | |
| ...state, | |
| {id: action.id, | |
| text: action.text, | |
| completed: false | |
| } | |
| ]; |
TapaniAla
/ Redux: Writing a Todo list reducer toggling final
Last active
June 1, 2017 11:03
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const todos = (state=[], action) => { | |
| switch (action.type) { | |
| case 'ADD_TODO': | |
| return [ | |
| ...state, | |
| {id: action.id, | |
| text: action.text, | |
| completed: false | |
| } | |
| ]; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <script src="https://wzrd.in/standalone/expect@latest"></script> | |
| <script src="https://wzrd.in/standalone/deep-freeze@latest"></script> | |
| </head> | |
| <body> |
TapaniAla
/ Redux14: Reducer composition with objects
Last active
June 8, 2017 05:15
JS Bin// source http://jsbin.com/zugupol
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const todo = (state, action) => { | |
| switch (action.type) { | |
| case 'ADD_TODO': | |
| return { | |
| id: action.id, | |
| text: action.text, | |
| completed: false | |
| }; | |
| case 'TOGGLE_TODO': | |
| if(state.id !== action.id) { |
OlderNewer