33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Redux vs MobX (둘 다 배우자!)
delete 시 slice extraReducer에서 id는 어떻게 받나요?
createAsyncThunk에서 삭제 api를 보내고 응답값은 보통 statusCode와 삭제메시지정도인데... slice의 extraReducer에서 id를 어떻게 받아서 state에서 삭제하는 방법이 무엇인지요?? export const deleteItem = createAsyncThunk( `item/deleteItem`, async (id, thunkAPI) => { const response = await axios.delete( `/api/items/${id}`, tokenConfig(thunkAPI.getState) ); return response.data; } const itemSlice = createSlice({ name: `item`, initialState: { items: [], isLoading: false }, reducers: {}, extraReducers: { [getItems.fulfilled]: (state, action) => { state.items = action.payload; state.isLoading = false; }, [addItem.fulfilled]: (state, action) => { state.items.push(action.payload); state.isLoading = false; }, [deleteItem.fulfilled]: (state, action) => { id??? }, }, });
- 미해결Redux vs MobX (둘 다 배우자!)
툴킷으로 비동기작업시 비즈니스로직 위치
안녕하세요! 툴킷으로 리액트-리덕스 프로젝트를 만들고 있습니다. 툴킷으로 비동기작업을 할 때, 예를들어 API를 호출하여 정보를 받아올 때 사후처리나 에러처리를 하려면 slice의 extraReducer에서 해야하는지요?? 컴포넌트에서 createAsynThunk 액션을 호출하기 때문에비즈니스로직이 컴포넌트에는 들어갈 수 없을 것 같고, createAsyncThunk에는 try-catch를 쓸수 없으니, 여기에도 로직이 들어갈 수 없을 것 같고.. extraReducer에서만 사후처리,에러처리 등의 로직이 들어갈 수 밖에 없는지요??
- 미해결Redux vs MobX (둘 다 배우자!)
질문있습니다~!
안녕하세요. 기초적인 부분 질문이 있는데요~! import Reducer = require(); import { addPost } = reauire(); 이 두개의 구문에서 import 다음에 {}를 선언한것과 없는 것의 차이가 무엇인가요?
- 미해결Redux vs MobX (둘 다 배우자!)
socketClient 에러
이런에러가 나는데 버전 호환이 안되는 문제일까요..? ㅠ
- 미해결Redux vs MobX (둘 다 배우자!)
getDefaultMiddleware 관련 질문드립니다.
안녕하세요 제로초님! 유익한 강의 감사합니다. 다름 아니라, 오늘 getDefaultMiddleware를 써보니까 라이브러리에서 deprecated되어있더라구요. 공식문서(https://redux-toolkit.js.org/api/getDefaultMiddleware)보니까 기존 사용하던 코드에서 어떻게 변경할지 가이드를 제시하고 있는데, 가이드대로 코드 변경해도 문제 없을까요 ??!
- 미해결Redux vs MobX (둘 다 배우자!)
store 접근이 가능한 걸까요?
createSlice에서 state는 초기 슬라이스를 만들때 넣어준 initialState와 이게 변경된 nextState값이 넘오 오게되는 것일까요? 아니면, store전체가 넘어 오게 되는 것일까요? 비동기 요청을 하는 동안 layout에 로딩창을 돌리고 싶으면 store에 있는 isLoading과 같은 layout단에 상태를 변경하고 싶을 수 도 있을 것 같아서요 onClick과 같은 곳에서 layout하고 연관된 action을 dispatch하고 그 하단에서 login과 같은 action을 다시 dispatch 해야 할까요? 원래 thunk는 dispatch함수를 함수의 인자로 넘겨줘서 loading dispatch도 thunk함수 내부에서 할 수 있었던것 같아서요, 아 그럼, createReducer을 통해서 thunk와 상관 없는 reducer를 만들고 combineReducer에 등록한다음 createAction('layout/loading') 만들어서, createAsyncThunk에서 넘어오는 thunkApi를 이용해서 thunkApi.dispatch(createAction('layout/loading'))과 같이 해주는 방법으로 사용하는 것일까요?
- 미해결Redux vs MobX (둘 다 배우자!)
dispatch에 then을 사용하고 싶습니다.
리덕스 툴킷을 사용하면서 dispatch().then()을 하면 then of undefined 에러가 나더라구요. https://redux-toolkit.js.org/api/createAsyncThunk#handling-thunk-results 공식 홈페이지 예제를 보고도 따라해보았는데 예제에 있는 방법들 모두 에러가 났습니다. 리턴을 return response.data;로 한 것이 문제였나 (프로미즈를 리턴하지 않고) 싶었지만 공식홈페이지 예제에서도 createAsyncThunc에서 return response.data 를 한 액션에 then()을 사용하더라고요. 어디가 문제였을까요! 제가 따라한 코드를 첨부합니다. //store.js import {configureStore, getDefaultMiddleware} from '@reduxjs/toolkit'; import reducer from './data_reducers/rootReducer'; const firstMiddleWare = (store) => (dispatch) => (action) => { dispatch(action); }; const store = configureStore({ reducer, middleware: [firstMiddleWare, ...getDefaultMiddleware({serializableCheck: false})], devTools: process.env.NODE_ENV !== 'production', }); export default store; //axios.js import axios from '@/axios'; import {BASEURL} from '@/App'; import {authToken} from '@/service/auth/auth.service'; import {createAsyncThunk} from '@reduxjs/toolkit'; export const fetchUserById = createAsyncThunk('users/fetchByIdStatus', async (userId, thunkAPI) => { let response = await axios.get(`${BASEURL}/test/`, { headers: { Authorization: 'Bearer ' + authToken(), 'Content-Type': 'application/json', }, }); return response.data; }); //reducer.js import { fetchUserById, } from '@/data_actions/userInfo_action/userInfo_action'; import {createSlice} from '@reduxjs/toolkit'; import {fetchUserById} from '@/data_actions/userInfo_action/userInfo_action'; const initialState = { isLogging: true, profile: null, isError: false, status: '', errorStatus: {}, }; export const userInfoSlice = createSlice({ name: 'userInfo', initialState, reducers: { resetStatus(state, action) { state.status = ''; state.errorStatus = {}; }, }, extraReducers: (builder) => { builder.addCase(fetchUserById.fulfilled, (state, action) => {}); }, }); //component import React, {useEffect, useRef, useState} from 'react'; import {useDispatch, useSelector} from 'react-redux'; import {unwrapResult} from '@reduxjs/toolkit'; function MyAccount(props) { const dispatch = useDispatch(); const onClickk = async () => { dispatch(fetchUserById()) .then(unwrapResult) .then((res) => { console.log(res); }) .catch((error) => {}); }; return ( <button onClick={onClickk}>test</button> ); }
- 미해결Redux vs MobX (둘 다 배우자!)
기존 프로젝트에서 redux toolkit을 적용하려면?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 기존 프로젝트가 redux로 구성되어있는 환경에서 레거시 소스를 건들지 않고 redux toolkit을 적용할 수 있을까요? 기존 기능은 소스 수정이 일어나면 QA의 부담이 있어서 신규기능에만 Toolkit을 적용하고 점진적으로 리팩토링 해나가고자하는데 가능할까요?
- 미해결Redux vs MobX (둘 다 배우자!)
@observer 데코레이터 사용 문의
old 브랜치의 redux-vs-mobx 의 7.mobx-react 의 App.jsx 를 보면 @observer 가 선언되어 있는데요 이부분을 제거하여도 동작은 똑같이 작동하는데 선언된 이유가 있을까요??
- 미해결Redux vs MobX (둘 다 배우자!)
Toolkit 관련 질문입니다.
삭제된 글입니다
- 미해결Redux vs MobX (둘 다 배우자!)
파일 첨부 컴퍼넌트 같은걸 만든다고 치면
리덕스 리덕스 사가가 필요할까요? 다음 메일 파일 드래그앤 드롭존 같은건데요 프로토타입은 https://github.com/node-hyun/nodebird2 인데요 노드버드를 참고해서 간단하게 드래그앤 드롭존을 만들었어요 노트 정리는 http://skilnote-for-react.co.kr/skilnote1/myshortcut/file-attach-download/81 이런식인데 리덕스 리덕스 사가가 필요한게 맞을까요? 그리고 파일 업로드에 대해 프로그래시브바를 요청 단계 요청 성공 사이에 퍼센티지가 올라가는걸 구현하려면 임의로 정기적으로 퍼센티지가 올라가게 만드나요 아니면 실제 업로드 정도가 반영되게 할수 있나요? 파일 업로드시에 프로그래시브바의 퍼센티지가 파일 업로드 정도를 정확하게 표시하도록 하려면 어떤 방법을 사용해야 하나요? 알려주시면 감사요 리액트 허접따리 레벨에서는 ui 가 복잡해지거나 파일 업로드 같은게 다루기 어려운데 이런 까다로운 부분들에 대해 부분적인 작업 위주로 새로운 강의를 만들어주실 계획 없으신가요 ㅋㅋ;; 말씀해주신대로 공식문서를 잘 참고해야 되는데 파일 업로드에 드래그앤 드롭정도만 연계되도 쉽지가 않고 상태 관리를 어떻게 해야할지 데이터를 어떻게 설정해야 될지도 막막 해요 ㅋㅋ;; 또 노드버드때 이미지 슬라이드 같은건 강의를 봐도 따라하기가 너무 어렵 ㅋㅋ;;
- 미해결Redux vs MobX (둘 다 배우자!)
실무 환경에서 부분적으로 뭔가 만들때 어떻게 하나요?
리액트 리덕스 리덕스 사가로 메일 첨부하는 부분을 만들려고 하는데요 제가 맡은 부분을 부분적으로 완성한뒤 뒤에 합치는 방식일것 같아요 근데 메일 페이지도 포털의 일부이고 그중의 일부인 파일 첨부 컴포넌트 인데 프로젝트 자체를 새로파서 App.js의 기본 페이지부터 만들라는거에요 뭔가 이상하지 않나요? 그럼 여기에 리덕스 리덕스 사가 리덕스 or 리덕스 툴킷을 적용하면 다른 사람 혹은 파트의 코드와 상태 관리 라이브러리가 다를 경우 굉장히 헷갈릴수 있는거 아닌가요? 물론 가이드라인은 리덕스 리덕스 사가이긴 한대요 파일 첨부 부분을 만들거니까 자 여기 기본 공통 라이브러리 리덕스 ts 롤업 등등 설정되어있는 기본 프로젝트 app.js 부터 만들어봐 뭔가 이상하지 않나요? 제가 임의로 리덕스 리덕스 사가 코드를 추가한뒤 나중에 쉽게 합칠수 있나요? 그리고 사가 쓴다는데 리덕스 툴킷보다 그냥 사가를 써야겠죠?
- 미해결Redux vs MobX (둘 다 배우자!)
강의를 다 듣고 실제로 적용해보려고 하는데 잘 안돼서 질문드립니다 ㅜㅜㅜㅜ 부탁드립니다 !
위와 같이 MainPage에 작성을 하였고 list를 get요청으로 불러와서 무한스크롤 형식으로 하려고 했는데 액션을 위와같이 적으면 콘솔 창에 아예 나타나지 않는 현상이 발생하는데 어떤 이유로 안나오는건지 몰라서 질문드립니다. 리듀서는 아래와 같이 작성했습니다. POSTMAN에 API 찍었을 때 나온 사진입니다.
- 미해결Redux vs MobX (둘 다 배우자!)
action.meta.arg 에 대하여
action.payload에 백엔드서버에서 받은 정보가 저장되고 thunk에 넣어줬던 데이터는 action.meta.arg에 저장되는거 같은데, 영상에선 thunk에 넣어줬던 데이터가 그대로 action.payload에 저장된다고 설명해주셔서 어떤게 맞는지 궁금합니다.
- 미해결Redux vs MobX (둘 다 배우자!)
logIn을 잘 불러왔는데 'logIn is not a function' 이라는 에러가 나타납니당..!
안녕하세요! 제로초님 리덕스 영상 잘 보고 있습니다! +_+ const { createStore } = require("redux"); const reducer = require("./reducers"); const { addPost } = require("./actions/post"); const { logIn, logOut } = require("./actions/user"); const initialState = { user: { isLoggingIn: true, data: null, }, posts: [], }; const store = createStore(reducer, initialState); store.subscribe(() => { console.log("changed"); }); console.log("1st", store.getState()); //절취선을 기준으로 위에부분은 미리 만들어놔야 되는 부분이고 //---------------------------------------------- // 밑에 부분은 리액트에서 실행하는 것이다. // 디스패치(액션 발생시켜준다) 스토어 공간 //로그인 했을 때 사용자 데이터 넣어주기 store.dispatch( logIn({ id: 1, name: "hyunju", admin: true, }) ); console.log("2nd", store.getState()); store.dispatch( addPost({ userId: 1, id: 1, content: "안녕하세요 리덕스", }) ); console.log("3nd", store.getState()); store.dispatch( addPost({ userId: 1, id: 1, content: "두번재 게시글입니다. 리덕스", }) ); console.log("4nd", store.getState()); store.dispatch(logOut()); console.log("5nd", store.getState()); 다름이 아니라 'index2.js' 이 파일에서 이렇게 코드를 작성했는데 이러한 오류사항이 발생합니다 ㅠㅠ 분명 logIn을 불러왔는데 왜 이러는지 알 수 있을까용 ?? const { logIn, logOut } = require("./actions/user");
- 미해결Redux vs MobX (둘 다 배우자!)
redux toolkit 사용시에 export default 사용 가능한지
강의 잘 보고 있습니다. redux toolkit 강좌에서 require와 module.exports 을 쓰셨는데 import from 과 export default는 쓸 수 없나요?? export default로 써봤는데 Cannot read property ~ undefined 라고 오류가 뜨네요.. 왜 그런 걸까요??
- 미해결Redux vs MobX (둘 다 배우자!)
computed를 외부로 분리한다면?
강의 잘 보았습니다. 위 코드에서 observable로 감싸진 객체 안에 state와 action, computed 속성으로 get을 넣어서 표현하셨는데 action은 const A = action(() => 식으로 observable 밖에서 선언하여 export할 수 있는데 혹시 computed도 외부로 분리하여 표현할 수 있는 방법이 있나요? 데코레이터 사용하지 않구요.
- 미해결Redux vs MobX (둘 다 배우자!)
Reaction의 인자에 대해
강의 잘 보고 있습니다. reaction을 작성할 때, 연속 함수로 표현하는 부분에서 첫 번째 함수와 두 번째 함수에서 값을 인자로 넘겨줄 수 있나요? 예를 들어 reaction(( 어떤 인자? ) => { }, ( 어떤 인자? ) => {}) return을 state.compB로 했는데 밑에서 console을 내릴 때도 state.compB로 표현하는 부분에서 궁금점이 생겨 질문드립니다. () => { return state.compB }, (value) => console.log(value) 이런 식 혹은 다른 인자를 삽입하는 것들이 가능한가요?
- 미해결Redux vs MobX (둘 다 배우자!)
Mobx의 불변성 체크
강의 잘 보았습니다. redux 처럼 불변성을 지켜주기 위해 타이트하게 관리하지 않는 점에서 매우 흥미로웠습니다. 그렇다면 혹시 observable({ data: [{ id: 1, name: 'A'}, { id: 2, name: 'B'}] )} 위처럼 observable state가 존재할 때, id 1번의 name을 C로 바꾸고 싶다면 data[0].name = 'C' 이런 식의 구문으로 사용해도 무방한 것인가요? 아니면 위와 같은 경우엔 copy를 통한 불변을 지켜주어야 하나요?
- 미해결Redux vs MobX (둘 다 배우자!)
리덕스툴킷과 리덕스사가 같이 쓰면 효율이 좋을까요?
안녕하세요 제로초님. 리덕스툴킷과 리덕스사가 같이 쓰면 효율이 좋을까요? 이번 개인 프로젝트로 블로그를 만들어보려고 합니다. 그래서 Next.js와 리덕스툴킷을 사용하려고 하는데요~ 구인공고보면 기업에서는 리덕스사가도 아직 쓰이는 곳이 보이는 것 같아서요~ 그래서 리덕스 사가를 써야할지 고민 중에 있습니다. 구글링을 해보니 둘이 쓰는 분들도 보여서 리덕스사가 이펙트 때문에 쓰이는건지... 굳이 그럴 필요는 없을지... 제로초님께서는 이제 리덕스 안쓰신다고 하셨지만, 만약 면접관 입장이라면 리덕스사가도 다룰줄 아는 사람이 더 좋게 보이실지.. ㅜ