function counter(state,action){ if(typeof state ==="undefined"){ return 0; } switch (action.type){ case "INCREMENT" return state +1; case "DECREMENT" return state -1; default : return state; } } var store = Redux.createStore(counter); var calueELem = document.getElementById("value") function render(){ valueElem.innerHTML = store.getState().toString() } render(); store.subscribe(render);여기 코드에서 궁금한 부분이 있어서 질문드립니다!처음에 상태를 설정하지 않았는데 강사님은 왜 초기 상태 count 가 0이라고 하신건가요?

state 변화에 따른 ui를 렌더링 할 때 render 함수 내부 코드가 매우 방대할 경우 보편적으로 어떤 로직 처리를 하는지 궁금합니다.(memo만 추가했지만, memo 렌더링 코드외의 다른 관련없는 렌더링 코드들이 방대할 경우입니다.) 강사님 좋은 강의 감사합니다!! 많이 배우고 있습니다 :)

counter 애플리케이션의 코드 중 render함수에서store에서 getState를 사용해 state 값을 가져오는데 이 때 toString()을 해주는 이유가 궁금합니다.  function render() { console.log(typeof store.getState()); valueElem.innerHTML = store.getState().toString(); }

ㅠㅠㅠㅠㅠㅠ 강사님 ... ㅠㅠㅠㅠㅠ이번에는 yarn, create-react-app으로 해서 다시 해당 실습 진행해보고 있는데요...(npx로 cra 설치하는데 예전엔 잘 썼었는데 왜인지 모르겠는데 계속 에러가 나서 똑같이는 못했어요...)강의와 동일한 코드인데 에러문구대로 한건지 모르겠는데 import thunkMiddleware from "redux-thunk";의 thunkMiddleware 키워드를 thunk로 변경했더니어제와 같이 vite 패키지 에러가 콘솔창에 뜨더라구여.....살려주세요ㅠㅠ해당 작업한 것까지 커밋한 내용인데 혹시 봐주실 수 있을까요...ㅜㅜhttps://github.com/laurenCho9/soaple-redux-cra

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/redux-thunk.js?v=c406571d' does not provide an export named 'default' (at store.js:3:8)(내용 수정 및 진행상태 업데이트 2023.03.21 am 02:33)비트로 설치한 모듈에서 제공하지 않는 내보내기라길래해결방법 찾아보다가https://github.com/reduxjs/redux-templates여기에 있는 리드미 내용대로yarn add vite-template-redux설치를 하긴 했는데 Vite, with TypeScript 가 아니라 React로 해서 그런지는 모르겠는데그래도 같은 오류가 뜨네요ㅠㅠㅠ  아래는 각각 입력한 코드 내용입니다store.jsimport { applyMiddleware, compose, createStore } from "redux"; import rootReducer from "./reducers"; import thunkMiddleware from "redux-thunk"; // import asyncFunctionMiddleware from "./middlewares/asyncFunctionMiddleware"; const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore( rootReducer, composeEnhancers(applyMiddleware(thunkMiddleware)) ); export default store;addTodoThunks.jsimport { addTodo as addTodoActionCreator, removeTodo as removeTodoActionCreator, } from "../actions/todoAction"; const TODO_MAX_COUNT = 3; function addTodoThunkActionCreator(text) { return async function addTodoThunk(dispatch, getState) { const state = getState(); if (state.todo.length < TODO_MAX_COUNT) { dispatch(addTodoActionCreator("아이템 추가중...")); setTimeout(() => { dispatch(removeTodoActionCreator()); dispatch(addTodoActionCreator(text)); }, 3000); return; } else { dispatch(addTodoActionCreator("최대 개수 초과!")); setTimeout(() => { dispatch(removeTodoActionCreator()); }, 3000); } }; } export default addTodoThunkActionCreator; TodoAppContainer.jsimport { connect } from "react-redux"; // import { // addTodoActionCreator, // removeTodoActionCreator, // removeAllActionCreator, // } from "../actions"; // import { // addTodoActionCreator, // removeTodoActionCreator, // removeAllActionCreator, // } from "../ducks/todoDuck"; import { addTodo as addTodoActionCreator, removeTodo as removeTodoActionCreator, removeAll as removeAllActionCreator, } from "../actions/todoAction"; import addTodoThunkActionCreator from "../thunks/addTodoThunks"; import TodoApp from "../../components/TodoApp"; function mapStateToProps(state, ownProps) { return { todoItems: state.todo, }; } function mapDispatchToProps(dispatch, ownProps) { return { addTodo: (text) => { // dispatch(addTodoActionCreator(text)); dispatch(addTodoThunkActionCreator(text)); }, removeTodo: () => { dispatch(removeTodoActionCreator()); }, removeAll: () => { dispatch(removeAllActionCreator()); }, triggerAsyncFunction: (asyncFunction) => { dispatch(asyncFunction); }, }; } const TodoAppContainer = connect(mapStateToProps, mapDispatchToProps)(TodoApp); export default TodoAppContainer;    

실습코드 부분이 빠르게 지나가는데,실습코드를 따로 받을수 있는 곳이 있을까요?

첫강의에 팝업 뜬 내용 못읽고 꺼버렸는데 무슨 내용이었는지 아시는 분 있으신가요ㅠㅠ최초 1회만 뜨는 거라 그런지 재접속 해봐도 안뜨네요 ㅠ

ppt 강의 자료는 어디서 받을 수 있나요?

counter 예제에서 script로 redux를 CDN으로 불러올 때404가 나는 것 같습니다!<script src=">"https://unpkg.com/browse/redux@5.0.1/dist/redux.mjs"></script>위와 같이 수정했는데 Redux를 찾을 수 없다고 나오네요..!혹시 뭐가 문제일까요 ?

안녕하세요. Ducks패턴 강의를 방금 들었습니다.실습에서 todoDuck.js에 todo 컴포넌트에서 사용되는 action만을 넣었는데,duck file은 컴포넌트로 구분하여 만드는것인가요??

안녕하세요 소플님 리액트와 리덕스툴킷을 같이 사용 할때 궁금한 점이 있어 질문 드립니다상태관리에서 데이터를 계속 해서 추가 할 때 불변성을 유지하나요?상태관리에서 데이터를 수정, 삭제 할 때 불변성을 유지하나요? 

const store = configureStore({ reducer:rootReducer, middleware: (getDefaultMiddleware)=>{ const defaultMiddleware = getDefaultMiddleware(); return [...defaultMiddleware]; } });강사님 마지막 실습코드에서여기서 기본미들 웨어를 가져 오는 이유를 잘 모르겠습니다   

serializableCheck: { ignoredActions: [ REHYDRATE, FLUSH, PAUSE, PERSIST, PURGE, REGISTER, ], },강사님 마지막 실습 코드에서 질문드려요 여기 코드는 검색을 하니 직렬화,역질렬화 검사 할때 사용 하는거라는데 마지막 실습 코드에서는 어떻게 사용 되는 건가요? 어떤 연관성? 이 있는 건가요?

react랑 redux 연결해서 화면 처음 띄우고 있는데 이처럼 강의랑 똑같이 코딩했는데,화면이 나오질않고있습니다. ㅠ 뭐가 문제일까요? 

각각의 todoReducer, memoReducer에 initialState를 전달하는 방법말고 createStore() 함수의 2번째 인자로 preloadedState를 전달하는 방법은 없나요?const preloadedState = { todo: initialTodoState, memo: initialMemoState, }; const store = createStore( rootReducer, preloadedState, applyMiddleware(loggerMiddleware), );(추가) 위와 같이 작성 후(각 reducer의 초기 상태 전달 안함), 애플리케이션이 동작하지 않더라구요..!(추가) 해서 GPT에게 물어봤습니다! 그랬더니 답변으로이 방법을 사용하면 preloadedState를 통해 전체 앱의 초기 상태를 한 곳에서 관리할 수 있어 유용합니다. 하지만 이 방법은 각 리듀서에서 초기 상태를 설정하는 방법과 병행해서 사용해야 합니다. 왜냐하면 preloadedState는 앱이 시작될 때 한 번만 사용되고, 그 이후에는 각 리듀서에서 정의한 초기 상태가 사용되기 때문입니다.해서 각 reducer에도 각각의 initialState 배열을 전달하니 동작은 하긴 하는데, 이럴꺼면 굳이 preloadedState를 전달하는 의미가 없는 것 같아서 조금 헷갈리네요..!결론적으로 질문은 아래와 같습니다..!1) 각 reducer에게 초기 상태를 전달하지않고 combine한 reducer를 createStore에 전달할 때, 초기 상태를 전달해서 사용하는 방법이 있나요?

const ACTION_TYPE_ADD_TODO = "ADD_TODO"; const ACTION_TYPE_REMOVE_TODO = "REMOVE_TODO"; const ACTION_TYPE_REMOVE_ALL = "REMOVE_ALL"; function addTodoActionCreator(text) { return { type: ACTION_TYPE_ADD_TODO, text, }; } function removeTodoActionCreator() { return { type: ACTION_TYPE_REMOVE_TODO, }; } function removeAllActionCreator() { return { type: ACTION_TYPE_REMOVE_ALL, }; }위와 같은 actionCreator들을 하나의 함수로 묶어서 쓰는 경우는 잘 없나요? 예를 들어 아래처럼요!function actionCreator(type, payload = {}) { return { type, ...payload, }; }정답은 없겠지만 뭔가 위에 3개로 분리되어있는 것도 하나로 표현하면 좋지 않을까 싶어서 여쭤봅니다!

pdf파일로도 보고싶은데 따로 제공안되나요?

RTK Query 에 대한 강의도 추후에 올려주실 생각 있으신가요 ??RTK Query 에 대한 한국어 자료가 별로 없네요 ㅠ