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
counter 예제에서 script로 redux를 CDN으로 불러올 때 404가 나는 것 같습니다! <script src= ">"https://unpkg.com/browse/redux@5.0.1/dist/redux.mjs"></script > 위와 같이 수정했는데 Redux를 찾을 수 없다고 나오네요..! 혹시 뭐가 문제일까요 ?
const store = configureStore({ reducer:rootReducer, middleware: (getDefaultMiddleware)=>{ const defaultMiddleware = getDefaultMiddleware(); return [...defaultMiddleware]; } }); 강사님 마지막 실습코드에서 여기서 기본미들 웨어를 가져 오는 이유를 잘 모르겠습니다
serializableCheck: { ignoredActions: [ REHYDRATE, FLUSH, PAUSE, PERSIST, PURGE, REGISTER, ], }, 강사님 마지막 실습 코드에서 질문드려요 여기 코드는 검색을 하니 직렬화,역질렬화 검사 할때 사용 하는거라는데 마지막 실습 코드에서는 어떻게 사용 되는 건가요? 어떤 연관성? 이 있는 건가요?
각각의 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개로 분리되어있는 것도 하나로 표현하면 좋지 않을까 싶어서 여쭤봅니다!
