커뮤니티

자유 라인 파이낸셜 출신 개발자와 리액트로 실무 서비스 제작하기

챕터17 Redux부분 오류

조연관

이리와 · 2022년 09월 29일(수정됨)

  • 게시글 신고/차단
  • 사용자 신고/차단

강의 27:27 부분에서 아래와같이 BuilderPage를 작성하였으나,

Input value 부분의 survey.title에서 오류가 발생합니다.

오류를 찾아보려했으나 useSelector부분에서 빈값이 날라옵니다..



오류메세지

redux.js:426 Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.


Uncaught TypeError: Cannot read properties of undefined (reading 'title')

    at BuilderPage (BuilderPage.js:63:1)

    at renderWithHooks (react-dom.development.js:16305:1)

    at updateFunctionComponent (react-dom.development.js:19588:1)

    at beginWork (react-dom.development.js:21601:1)

    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)

    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)

    at invokeGuardedCallback (react-dom.development.js:4277:1)

    at beginWork$1 (react-dom.development.js:27451:1)

    at performUnitOfWork (react-dom.development.js:26557:1)

    at workLoopSync (react-dom.development.js:26466:1)

BuilderPage.js
const
survey = useSelector((state) => state.title)
const dispatch = useDispatch();
return (
<MainLayout selectedKeys={"builder"}>
<Row>
<Col flex={"auto"}>
<Input
placeholder={"설문 제목을 입력해주세요."}
value={survey.title}
onChange={(e) => {
dispatch(setTitle(e.target.value));
}}
/>



SurveySlice.js


const initialState= {
"id": 1,
"title": "명절 선물 선호도 조사",
"questions": [
{
"title": "설날에 받고 싶은 선물은 무엇인가요? (최대 3)",
"desc": "특별히 받고 싶은 선물이 없다면 선택하지 말고 넘어가세요.",
"type": "select",
"required": false,
"options": {
"max": 3,
"items": [
"식품",
"전자기기",
"도서",
"의류",
""
]
}
},
{
"title": "추석에 받고 싶은 선물은 무엇인가요?",
"desc": "특별히 받고 싶은 선물이 없다면 입력하지 말고 넘어가세요.",
"type": "text",
"required": false,
"options": {
"max": 10,
"placeholder": "10자 이내로 입력해주세요."
}
},
{
"title": "입력한 선물을 받고 싶은 이유가 무엇인가요? (필수)",
"desc": "",
"type": "textarea",
"required": true,
"options": {
"max": 100,
"placeholder": "100자 이내로 입력해주세요."
}
}
],
"createdAt": 1647160914620
}

export const surveySlice = createSlice({
name: 'survey',
initialState,
reducers: {
setTitle: (state, action) => {
state.title = action.payload;
},
}
})

export const { setTitle } = surveySlice.actions;
export default surveySlice.reducer;

라인 파이낸셜  출신 개발자와 리액트로 실무 서비스 제작하기 라인 파이낸셜 출신 개발자와 리액트로 실무 서비스 제작하기 강의 보러가기

0

3

댓글

자유게시판 최신글

더보기

최근 검색어

추천 검색어