개발자를 향해...

본 글은 노마드코더 님의 [초보자를 위한 리덕스 101]을 수강하며 작성하였습니다. #3.2 mapStateToProps 이제 우리는 redux state로부터 정보를 가지고올 수 있어야한다.store.getState()로 현재 상태를 가져왔었다. bash라는 함수가 있는데 이 함수는 component를 store에 연결시킨다. 이 connect를 사용해보자.home.js에서 import { connect } from "react-redux"; 를 추가한다. 그리고 todo를 추가하고 가져오기위해 밑부분에 다음 코드르 추가한다. function getCurrentState(){ return { toDos: state }; } export default connect(getCurrentState)(Home..

본 글은 노마드코더 님의 [초보자를 위한 리덕스 101]을 수강하며 작성하였습니다. #2.2 Delete To Do 배열에서 삭제하는 기능을 만들어보자. 우선 입력한 리스트를 ul에 넣고 삭제 버튼을 같이 나열한다. 삭제할 때에는 id를 통해 삭제한다. import {createStore} from "redux"; const form = document.querySelector("form"); const input = document.querySelector("input"); const ul = document.querySelector("ul"); const ADD_TODO = "ADD_TODO"; const DELETE_TODO = "DELETE_TODO"; const addToDo = text => ..

본 글은 노마드코더 님의 [초보자를 위한 리덕스 101]을 수강하며 작성하였습니다. #2.0 Vanilla ToDo To do list를 만들어보자 우선 html의 body부분을 다음과 같이 바꾸어준다. To Dos Add 이제 js 부분을 바꾸어주자. form, input, ul 을 연결하고 reder에 배열과 action을 넣어주자. 그리고 reducer로 createStore을 해준다. 그리고 버튼을 누르면 이벤트를 발생시켜 입력창의 값을 toDo에 추가하는 onSubmit 함수를 만들어보자. import {createStore} from "redux"; const form = document.querySelector("form"); const input = document.querySelector..

본 글은 노마드코더 님의 [초보자를 위한 리덕스 101]을 수강하며 작성하였습니다. #1.2 Actions count modifier에게 액션을 주기 위해서 countStore을 이용하는 방법이 있다. import {createStore} from "redux"; const add=document.getElementById("add"); const minus =document.getElementById("minus"); const number =document.querySelector("span"); const countModifier=(count=0,action)=>{ console.log(action); return 1; }; const countStore =createStore(countModifi..