diff --git a/Unit-01/05-redux/action.js b/Unit-01/05-redux/action.js new file mode 100644 index 0000000..95f6278 --- /dev/null +++ b/Unit-01/05-redux/action.js @@ -0,0 +1,27 @@ +function happy() { + return { + type: "HAPPY", + payload: "(ﾉ･ω･)ﾉ" + }; +} + +function sad() { + return { + type: "SAD", + payload: "((´д｀))" + }; +} + +function confused() { + return { + type: "CONFUSED", + payload: "?(‘◉⌓◉’)?" + }; +} + +function angry() { + return { + type: "ANGRY", + payload: "((⓪益⓪))" + }; +} diff --git a/Unit-01/05-redux/index.html b/Unit-01/05-redux/index.html index 5fa11b4..468adbf 100644 --- a/Unit-01/05-redux/index.html +++ b/Unit-01/05-redux/index.html @@ -4,7 +4,7 @@ - Redux Demo + Choose your mood @@ -21,6 +21,8 @@

+ + \ No newline at end of file diff --git a/Unit-01/05-redux/main.js b/Unit-01/05-redux/main.js index e69de29..635d940 100644 --- a/Unit-01/05-redux/main.js +++ b/Unit-01/05-redux/main.js @@ -0,0 +1,26 @@ +const store = Redux.createStore( + rootReducer, + window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() +); + +const face = document.getElementById("face"); +function render() { + face.innerHTML = store.getState().face; +} + +render(); +store.subscribe(render); + +document.getElementById("happy").addEventListener("click", () => { + store.dispatch(happy()); +}); +document.getElementById("sad").addEventListener("click", () => { + store.dispatch(sad()); +}); + +document.getElementById("angry").addEventListener("click", () => { + store.dispatch(angry()); +}); +document.getElementById("confused").addEventListener("click", () => { + store.dispatch(confused()); +}); diff --git a/Unit-01/05-redux/reducer.js b/Unit-01/05-redux/reducer.js new file mode 100644 index 0000000..4cec310 --- /dev/null +++ b/Unit-01/05-redux/reducer.js @@ -0,0 +1,23 @@ +const DEFAULT_STATE = { + face: "?(‘◉⌓◉’)?" +}; + +function rootReducer(state = DEFAULT_STATE, action) { + switch (action.type) { + case "HAPPY": { + return { ...state, face: action.payload }; + } + case "SAD": { + return { ...state, face: action.payload }; + } + case "ANGRY": { + return { ...state, face: action.payload }; + } + case "CONFUSED": { + return { ...state, face: action.payload }; + } + default: { + return { ...state }; + } + } +}