Redux
-
Redux toolkit (create Slice)Redux 2022. 7. 29. 13:25
createSlice를 사용하면, 코드를 더 줄일 수 있다. const addToDo = createAction("ADD"); const deleteToDo = createAction("DELETE"); //createReducer const reducer = createReducer([], { [addToDo]: (state, action) => { state.push({ text: action.payload, id: Date.now()}) }, [deleteToDo]: (state, action) => state.filter(toDo => toDo.id !== action.payload) }) 위의 코드를 const toDos = createSlice({ name: 'toDosReducer', ini..
-
Redux toolkit(create Reducer)Redux 2022. 7. 29. 12:50
createReducer은 reducer부분을 짧게 줄일 수 있다. //createAciton // const reducer = (state = [], action) => { // switch(action.type) { // case addToDo.type: // return [...state, { text: action.payload, id: Date.now()}]; // case deleteToDo.type: // return state.filter(toDo => toDo.id !== action.payload); // default: // return state; // } // }; //createReducer const reducer = createReducer([], { [addToDo]: (s..
-
Redux Toolkit(create Action)Redux 2022. 7. 29. 09:59
리덕스 툴킷은 적은량의 코드로 같은 기능을 하도록 도와주는 것이다. 먼저 설치를 해보자. npm install @reduxjs/toolkit 설치를 하고, 먼저 해볼건 createAction이다. // const ADD = "ADD"; // const DELETE = "DELETE"; // const addToDo = text => { // return { // type: ADD, // text // }; // } // const deleteToDo = id => { // return { // type: DELETE, // id: parseInt(id) // }; // } const addToDo = createAction("ADD"); const deleteToDo = createAction("DELE..
-
mapStateToProps와 mapDispatchToPropsRedux 2022. 7. 28. 04:20
먼저, 기본 셋팅을 해주면, index.js에는 import React from "react"; import * as ReactDOM from 'react-dom/client'; import { Provider } from "react-redux"; import App from './components/App'; import store from './store'; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); 위처럼 셋팅을 맞춰주고, Provider에 store를 연결해주고, App을 감싸준다. App.js 에서 import React from "react"; import { BrowserRouter, ..
-
리덕스만으로 todo 만들기Redux 2022. 7. 27. 21:33
To Dos Add html을 짜주고, 리덕스로 상태관리를 할 수 있게 해보자. import { createStore } from "redux"; const form = document.querySelector("form"); const input = document.querySelector("input"); const ul = document.querySelector("ul"); 먼저, 각각의 태그를 잡아주고, const reducer = (state = [], action) => { switch(action.type) { case ADD_TODO://...state를 뒤로보내면 순서바뀜 치는게 아래로 내려가게 return [...state, { text: action.text, id: Date.now..
-
개선사항Redux 2022. 7. 27. 20:31
reducer함수에서 action을 사용할 때, if말고 switch를 사용할 수 있다. const countModifier = (count = 0, action) => { // if (action.type === "ADD") { // return count + 1; // } else if (action.type === "MINUS") { // return count - 1; // } else { // return count; // } switch (action.type) { case "ADD": return count + 1 case "MINUS": return count - 1 default: return count } } 그리고, action type에서 string으로 작성하게 되면 "MNUS"이..
-
subscribeRedux 2022. 7. 27. 20:17
이제 버튼에 연결해서 기능을 만들어보면 const add = document.getElementById('add'); const minus = document.getElementById('minus'); const number = document.getElementById('number'); const countModifier = (count = 0, action) => { if (action.type === "ADD") { return count + 1; } else if (action.type === "MINUS") { return count - 1; } else { return count; } } const countStore = createStore(countModifier); const hand..
-
actionRedux 2022. 7. 27. 19:52
저번에 store와 reducer의 의미를 배웠는데, store는 data를 저장하는 공간, reducer은 data를 수정하는 공간이다. 여기서 data를 수정하려면 action을 통해서 가능하다. action은 reducer의 두번째 파라미터이고, countStore.dispatch({type: "ADD"}) 이런 식으로, store에 dispatch()를 붙여서 오브젝트형식을 action에 보낼 수 있다. type: "ADD" 를 먼저 보내보자. 이러면 reducer안에서 action은 type: "ADD"가 된다. const countModifier = (count = 0, action) => { if (action.type === "ADD") { console.log('hello') } retu..