본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. createSlice 더보기 const addToDo = createAction("ADD"); const deleteToDo = createAction("DELETE"); const reducer = createReducer([], { [addToDo]: (state, action) => { state.push({ text: action.payload, id: Date.now() }); }, [deleteToDo]: (state, action) => state.filter((toDo) => toDo.id !== action.payload), }); createSlice는 reducer뿐만 아니라 action도 자동으로 생성..
본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. configureStore const store = configureStore({ reducer }); configureStore는 createStore와 비슷하게 쓰이지만 중간에서 Redux DevTools를 이용할 수 있게 해준다. Redux DevTools를 이용하면 Redux의 내부 상태 및 히스토리를 직접 볼 수 있게 된다. 사실 Redux Toolkit이 없어도 Redux DevTools은 사용할 수 있다. 자동으로 켜주는게 다를 뿐. 어쨌든 Redux Developer Tool을 설치하려면 - Redux DevTools Extension : Github GitHub - zalmoxisus/redux-devtoo..
본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. createReducer 더보기 const reducer = (state = [], action) => { switch (action.type) { case addToDo.type: console.log(action); return [{ text: action.payload, id: Date.now() }, ...state]; case deleteToDo.type: return state.filter((toDo) => toDo.id !== action.payload); default: return state; } }; createReducer는 말 그대로 reducer를 만들어주는 함수이고, reducer를 작성하는데 코드..
본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. Redux Toolkit 사람들은 Redux를 사용할 때 많은 코드를 적어야 하는 것이 불편하다고 느꼈고, 이에 보완책으로 나온 것이 Redux Toolkit이다. 즉, Redux Toolkit은 더 적은 코드로 Redux와 같은 일을 행하게 해주는 Package이다. npm install @reduxjs/toolkit createAction 더보기 const ADD = "ADD"; const DELETE = "DELETE"; const addToDo = (text) => { return { type: ADD, text, }; }; const deleteToDo = (id) => { return { type: DELETE,..
본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. mapDispatchProps connect 함수는 component와 store를 연결시켜주는 함수이다. connect는 둘 중 하나의 arguments를 가질 수 있다. state dispatch 이번에는 dispatch를 살펴보자. ... function mapDispatchToProps(dispatch) { console.log(dispatch); } export default connect(null, mapDispatchToProps)(Home); Home.js connect를 통해 mapDispatchProps를 사용하려면 다음과 같이 작성해줄 수 있다. 여기서 반환되는 dispatch를 살펴보면 위와 같다. i..
본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. 개인적으로 이해한 내용이 들어가있어 부정확한 내용이 적힐 수 있습니다. 지적 바랍니다. 이제 우리는 React에서 Redux를 사용하고자 한다. Redux에서는 기존에 제공하는 Redux 라이브러리에 react-redux라는 라이브러리를 추가로 제공해준다. npm install react-redux 더보기 import React from "react"; import ReactDOM from "react-dom"; import App from "./conponents/App"; ReactDOM.render( , document.getElementById("root") ); index.js import React from "r..
본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. Dataless System To DOs ADD const form = document.querySelector("form"); const input = document.querySelector("input"); const ul = document.querySelector("ul"); const toDos = []; const createToDo = (toDo) => { const li = document.createElement("li"); li.innerText = toDo; ul.appendChild(li); }; const onSubmit = (e) => { e.preventDefault(); const toDo =..
본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. Redux의 Store를 출력해보면 다음과 같은 함수들이 나온다. getState()는 store 내부의 현재 state값을 반환해주는 함수이고 dispatch()는 action에게 메세지를 보내기 위해 사용하는 함수라는 것을 우리는 배웠다. 그러면 subscribe() 함수는 어떤 함수일까? subscribe import { createStore } from "redux"; const add = document.getElementById("add"); const minus = document.getElementById("minus"); const number = document.querySelector("span"); c..
본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. 더보기 Add minus Actions import { createStore } from "redux"; const coountModifier = (count = 0, action) => { return count; }; const countStore = createStore(coountModifier); redux에서 function을 부르기 위해 사용하는 2번째 파라미터이다. (첫번째 파라미터는 state) reducer는 store에 저장된 파라미터를 업데이트하지만 +1을 할지 -1을 할지는 우리가 말해주어야한다. 이렇게 reducer에게 말할 수 있는 방법이 action이다. dispatch import { crea..
본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다. 개인적으로 이해한 내용이 들어가있어 부정확한 내용이 적힐 수 있습니다. 지적 바랍니다. npm install redux Redux 왜 쓸까? 사실 RTK까지 강의를 듣고 나서도 Redux를 왜 쓰는지 어렴풋이는 알겠는데 정말 어렴풋이만 알았다. Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. 라고 하는데 예측 가능한게 뭔데요? 몰?루 이러고 있으니까 당연히 이해가 안됐다. 그러다 새벽에 React 연습하다가 유튜브에서 괜찮은 영상을 봐서 가장 첫 글인 이 글에 가장 첫 부분, 즉 쓰는 이유를 알았어야 하는 타이밍인 이 곳에 이제야 정리해두려고 한다. Redux를 쓰는 이유는 크게 2가지이다. props..
